如何在 Symfony 中设置 Typescript？

问题：

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

该解决方案应解决以下几点：

1. 私有 typescript 目录中的 Typescript MVC 模式：

   src > XBundle > 资源 > 私人 > 打字稿

2. Javascript 包编译于：

   src > XBundle > 资源 > 公共 > js

3. 私有目录应包含不同页面的多个应用程序。 （如果应用程序需要自己的tsconfig.json文件，没问题）

4. 一个应用程序很简单（例如）home.app.ts导入（例如）a搜索组件.ts and a 聊天组件.ts

5. 编译后的“应用程序”应位于公共 > js第 (2) 点中提到的存储库应命名（示例取自第 (4) 点）home.bundle.js

6. In the public > js文件夹，应该只有x.bundle.js files

7. 将捆绑包添加到我的树枝文件中，并调用我的视图应该立即运行该捆绑包。我不应该添加额外的脚本来调用“module”（这就是我想避免的原因AMD / System )

我不是在寻找什么：

I'm not寻找解决方案react and angular但使用的通用解决方案/websymfony 项目根目录（甚至是包中的 Resources 目录）。

大多数关于这个话题的文章都是关于symfony2并尝试整合react and angular.

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

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

我最终使用了 webpack 来实现这一点。支持@zerkms。这是一项正在进行的工作，可以更好地优化。

安装：

1. Install webpack，我个人是全局安装的。 （不确定如何配置 Phpstorm 使用 webpack，似乎没有直接内置的系统）

2. Go to src > XBundle > Resources > private > typescript

3. npm init -y

4. 安装开发依赖项：npm install --save-dev awesome-typescript-loader and 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在主页上，您可能应该创建一个home.component.ts使用auth.component.ts and search.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"
  ]
}

Run

Type webpack在目录中webpack.config.js居住。

将 JS 添加到 Twig 文件中

在您的模板之一中的某处。

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

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

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