如何在Symfony中设置Typescript？

Question

题:

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

以下是此解决方案应解决的问题:

1. 私有打字稿目录中的Typescript MVC Pattern:

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

2. 编译的Javascript包:

   src> XBundle>资源> public> js

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

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

5. 编译的"apps"应位于第(2)点中提到的public> js存储库中,并且应该命名(示例来自第(4)点)home.bundle.js

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

7. 将包添加到我的twig文件,并调用我的视图应立即运行该包.我不应该添加额外的脚本来调用" module"(这就是为什么我要避免AMD/ System)

我不想要的:

我不是在寻找一个解决方案react,并angular而是使用一个通用的解决方案/web在symfony项目的根目录下(甚至是资源目录中包).

关于这个的大多数文章谈论symfony2和尝试整合react和angular.

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

我不需要自动编译.我使用Phpstorm,所以它无论如何都会自动执行.

Answer 1

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

\n\n

安装：

\n\n

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

2. 去src > XBundle > Resources > private > typescript

\n

3. npm init -y

\n
4. 安装开发依赖项：npm install --save-dev awesome-typescript-loader和npm install --save-dev typescript
\n

\n\n

边注：

\n\n

@Morgan Touverey Quilling，建议在本地安装 webpack，您的选择：

\n\n

npm install --save-dev webpack

\n\n

配置：

\n\n

这是我的文件夹结构：

\n\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 XBundle/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Controller\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Resources\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 config\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 private\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 typescript\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 auth\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 auth.component.ts\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 search\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 search.component.ts\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 services\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 http.service.ts\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 webpack.config.js\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 build\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 auth.bundle.js\n

\n\n

webpack.config.js \n这个配置可能可以进一步简化。

\n\n

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

\n\n

每页不应包含超过一个捆绑包。如果您需要（例如）主页上的auth.bundle.js和，您可能应该创建一个使用和并在中创建一个配置search.bundle.jshome.component.tsauth.component.tssearch.component.tswebpack.config.js来创建home.bundle.js

\n\n

const path = require(\'path\');\n\n//Common configurations\nlet config = {\n    module: {\n        loaders: [\n            { test: /\\.ts$/, loader: \'awesome-typescript-loader\' }\n        ]\n    },\n    resolve: {\n        extensions: [\'.ts\']\n    }\n};\n\n//Copy and paste this for as many different bundles\n//as required\nlet authConfig = Object.assign({}, config, {\n    entry: path.join(__dirname, \'components/auth\',\'auth.component.ts\'),\n    output: {\n        path: path.join(__dirname, \'../../public/js/build\'),\n        filename: \'auth.bundle.js\',\n        library: \'XApp\'\n    }\n});\n\n//Add each config here.\nmodule.exports = [\n    authConfig\n];\n

\n\n

tsconfig.json

\n\n

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

\n\n

跑步

\n\n

输入webpack所在目录webpack.config.js。

\n\n

将 JS 添加到 Twig 文件中

\n\n

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

\n\n

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

\n\n

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

\n\n

php bin/console assets:install\nphp bin/console assetic:dump\n

\n