如何在Symfony中设置Typescript?

问题描述

如何在Symphony的配置文件中进行最少的配置更改的情况下，使用Symfony设置Typescript?

How do I set up Typescript with Symfony with the minimum amount of configurations changes to Symphony’s configuration files?

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

Here are the points that this solution should solve:

1. 私人打字稿目录中的打字稿MVC模式:

1. Typescript MVC Pattern in a private typescript directory:

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

在以下位置编译的Javascript捆绑包:

Javascript bundles compiled in :

src> XBundle>资源>公共> js

私有目录应包含用于不同页面的多个应用程序. (如果应用程序需要它自己的tsconfig.json文件，就可以了)

the private directory should consist of multiple apps for different pages. (If an app requires it's own tsconfig.json file, that's fine)

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

an app is simply (for example) home.app.ts that imports (for example) a search.component.ts and a chat.component.ts

已编译的应用程序"应位于第(2)点提到的 public> js 存储库中，并应命名为(来自第(4)点的示例) home. bundle.js

Compiled "apps" should be located in the public > js repository mentioned in point (2) and should be named (example taken from point (4)) home.bundle.js

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

In the public > js folder, there should only be x.bundle.js files

将捆绑软件添加到我的树枝文件中，并调用我的视图应立即运行捆绑软件.我不必添加一个额外的脚本来调用"module"(这就是我要避免使用AMD/System的原因)

Adding the bundles to my twig files, and calling my view should immediately run the bundle. I should not have to add an extra script to call the "module" (this is the reason why I want to avoid AMD / System )

我不需要的东西

我不是不是在寻找使用react和angular的解决方案，而是在以下位置使用/web目录(甚至捆绑包中的Resources目录)的通用解决方案.一个symfony项目.

What I'm not looking for:

I'm not looking for a solution with react and angular but a general solution using the /web directory (or even the Resources directory in a bundle) at the root of a symfony project.

与此有关的大多数文章都谈论symfony2，并尝试集成react和angular.

Most articles regarding this talk about symfony2 and try integrating react and angular.

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

I'm not looking for an installation tutorial for npm and tsc.

我不需要自动编译.我使用Phpstorm，因此它还是会自动执行.

I don't need an automatic compile. I use Phpstorm so it does it automatically anyway.

推荐答案

我最终使用webpack使其正常工作.到@zerkms的道具.这是一项正在进行中的工作，可以进行更好的优化.

I ended up using webpack for this to work. Props to @zerkms.This is a work in progress, and could be better optimized.

1. 安装 webpack ，我个人是在全球范围内安装的. (不确定如何配置Phpstorm以使用Webpack，似乎没有直接内置的系统)

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

1. Install webpack, I personally installed it globally. (Unsure how to configure Phpstorm to use webpack, there doesn't seem to be a direct built in system for it)

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

npm init -y

旁注:

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

@Morgan Touverey Quilling, recommends installing webpack locally, your choice:

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 此配置可能会进一步简化.

对于每个捆绑包，应创建一个指向主文件的新配置.记住要重命名输出包.

For every bundle, a new config should be created pointing to the main file. Remember to rename the output bundle.

每页不应超过一个捆绑包.如果需要(例如)主页上的auth.bundle.js和search.bundle.js，则可能应该创建一个使用auth.component.ts和search.component.ts的home.component.ts，并在webpack.config.js中创建一个配置以创建home.bundle.js

There shouldn't be more than one bundle per page. If you need (for example) the auth.bundle.js and the search.bundle.js on the home page, you should probably create a home.component.ts that uses auth.component.ts and search.component.ts and create a config in webpack.config.js to create the 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.

Run

Type webpack in the directory where webpack.config.js resides.

其中一个模板中的某处.

Somewhere in one of your templates.

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

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

And run the following commands for any new bundles.js created for the first time in the root directory of your symfony project:

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

这篇关于如何在Symfony中设置Typescript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！