symfony - 如何在 Symfony 中设置 Typescript？

Question

问题:

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

这里是这个解决方案应该解决的问题:

1. 私有(private) typescript 目录中的 typescript MVC 模式:

   src > XBundle > Resources > private > typescript

2. Javascript 包编译于:

   src > XBundle > Resources > public > js

3. 私有(private)目录应包含用于不同页面的多个应用程序。 (如果一个应用需要它自己的 tsconfig.json 文件，那很好)

4. 一个应用只是(例如)home.app.ts，它导入(例如)一个search.component.ts 和一个 chat.component.ts

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

6. 在public>js文件夹中，应该只有x.bundle.js文件

7. 将包添加到我的 twig 文件并调用我的 View 应该会立即运行包。我不必添加额外的脚本来调用“module”(这就是我想避免 AMD/System 的原因)

我不寻找的是:

我不是在寻找使用react 和angular 的解决方案，而是使用/web 的通用解决方案> 位于 symfony 项目根目录的目录(甚至是包中的 Resources 目录)。

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

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

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

Answer 1

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

安装:

1. 安装 webpack ，我亲自全局安装了它。 (不确定如何配置 Phpstorm 以使用 webpack，似乎没有直接内置的系统)

2. 转到 src > XBundle > Resources > private > typescript

3. npm init -y

4. 安装开发依赖项: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，您应该创建一个 home.component .ts 使用 auth.component.ts 和 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"
  ]
}

运行

在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