如何在 Symfony 中设置 Typescript？

Question

问题：

如何使用 Symfony 设置 Typescript，同时对 Symphony 配置文件进行最少的配置更改？

以下是此解决方案应解决的要点：

私人打字稿目录中的打字稿 MVC 模式：

src > XBundle > Resources > private > typescript
Javascript 包编译于 :

src > XBundle > 资源 > public > js
私有目录应该由不同页面的多个应用程序组成。（如果一个应用程序需要它自己的 tsconfig.json 文件，那很好）
一个应用程序只是（例如）home.app.ts 导入（例如）search.component.ts 和一个 chat.component.ts
编译后的"apps"应该位于第(2)点提到的public>js仓库中，并且应该命名为(示例取自第 (4) 点) home.bundle.js
在public > js文件夹中，应该只有x.bundle.js个文件
将捆绑包添加到我的 twig 文件，并调用我的视图应该立即运行捆绑包。我不必添加额外的脚本来调用“module”（这就是我想避免 AMD / System ）
[=73= 的原因]

我不想要的：

我不是寻找react和angular的解决方案，而是使用/web目录（甚至包中的 Resources 目录）在 symfony 项目的根目录下。

大多数关于此的文章都在谈论 symfony2 并尝试整合 react 和 angular。

我不是在寻找 npm 和 tsc 的安装教程。

我不需要自动编译。我使用 Phpstorm，所以它会自动执行。

Answer 1

我最终使用 webpack 来完成这个工作。支持@zerkms。 这是一项正在进行的工作，可以进行更好的优化。

安装：

安装webpack，我是亲自全局安装的。（不确定如何配置 Phpstorm 以使用 webpack，似乎没有直接内置的系统）
转到src > XBundle > Resources > private > typescript
npm init -y
安装开发依赖项：npm install --save-dev awesome-typescript-loader 和 npm install --save-dev typescript

旁注：

@Morgan Touverey Quilling，推荐在本地安装webpack，自己选择：

npm install --save-dev webpack

配置：

这是我的文件夹结构：

├── XBundle/
│   ├── Controller
│   ├── Resources
│   │   ├── config
│   │   ├── private
│   │   │   ├── typescript
│   │   │   │   ├── components
│   │   │   │   │   ├── auth
│   │   │   │   │   │   ├── auth.component.ts
│   │   │   │   │   ├── search
│   │   │   │   │   │   ├── search.component.ts
│   │   │   │   ├── services
│   │   │   │   │   ├── http.service.ts
│   │   │   │   ├── node_modules
│   │   │   │   ├── package.json
│   │   │   │   ├── webpack.config.js
│   │   │   │   ├── tsconfig.json
│   │   ├── public
│   │   │   ├── js
│   │   │   │   ├── build
│   │   │   │   │   ├── auth.bundle.js

webpack.config.js 此配置可能会进一步简化。

对于每个包，应该创建一个指向主文件的新配置。请记住重命名输出包。

每页不应超过一个包。如果您需要（例如）主页上的 auth.bundle.js 和 search.bundle.js，您应该创建一个使用 auth.component.ts 和 search.component.ts 的 home.component.ts 并创建webpack.config.js 中的配置以创建 home.bundle.js

const path = require('path');

//Common configurations
let config = {
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'awesome-typescript-loader' }
        ]
    },
    resolve: {
        extensions: ['.ts']
    }
};

//Copy and paste this for as many different bundles
//as required
let authConfig = Object.assign({}, config, {
    entry: path.join(__dirname, 'components/auth','auth.component.ts'),
    output: {
        path: path.join(__dirname, '../../public/js/build'),
        filename: 'auth.bundle.js',
        library: 'XApp'
    }
});

//Add each config here.
module.exports = [
    authConfig
];

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "sourceMap": true,
    "moduleResolution": "node",
    "lib": ["dom", "es2015", "es2016"]
  },
  "exclude": [
    "node_modules"
  ]
}

运行

在 webpack.config.js 所在的目录中键入 webpack。

将 JS 添加到您的 Twig 文件

您的某个模板中的某处。

{% block javascripts %}
    {# More stuff here #}
    {% javascripts
    '@XBundle/Resources/public/js/build/auth.bundle.js'
    %}
    {# More stuff here #}
    {% endjavascripts %}
{% endblock %}

和运行以下命令用于在您的 symfony 项目的根目录中首次创建的任何新 bundles.js：

php bin/console assets:install
php bin/console assetic:dump

如何在 Symfony 中设置 Typescript？

How to set up Typescript in Symfony?

symfony

typescript

webpack

symfony-3.1

typescript2.0

问题：

我不想要的：

安装：

配置：

运行

将 JS 添加到您的 Twig 文件