Question

问题：

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

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

私有打字稿目录中的Typescript MVC Pattern：

src＆gt; XBundle＆gt;资源＆gt;私人＆gt;打字稿
编译的Javascript包：

src＆gt; XBundle＆gt;资源＆gt;公众＆gt; JS
私人目录应包含针对不同网页的多个应用。（如果某个应用需要它自己的tsconfig.json文件，那很好）
应用只是（例如） home.app.ts 导入（例如） search.component.ts 和 chat.component.ts
已编译的“应用”应位于公开＆gt;第（2）点中提到的js 存储库，应该命名（示例来自第（4）点） home.bundle.js
在public > js文件夹中，应该只有x.bundle.js个文件
将捆绑包添加到我的twig文件中，并调用我的视图应该立即运行捆绑包。我不应该添加额外的脚本来调用“module”（这就是为什么我要避免AMD / System）

我不想要的：

我不正在寻找使用react和angular的解决方案，但使用/web目录（甚至是资源目录）中的一般解决方案捆绑）在symfony项目的根目录。

关于此问题的大多数文章都是关于symfony2并尝试整合react和angular。

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

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

Answer 1

我最终使用webpack来实现这个目的。道具到@zerkms。 这是一项正在进行的工作，可以更好地进行优化。

安装：

安装webpack，我亲自在全球范围内安装了它。（不确定如何配置Phpstorm以使用webpack，它似乎不是一个直接内置的系统）
转到src > XBundle > Resources > private > typescript
npm init -y
安装dev依赖项：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的{{1}}并创建search.component.ts中的配置，用于创建webpack.config.js

home.bundle.js

<强> tsconfig.json

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
];

运行

在{ "compileOnSave": true, "compilerOptions": { "sourceMap": true, "moduleResolution": "node", "lib": ["dom", "es2015", "es2016"] }, "exclude": [ "node_modules" ] }所在的目录中输入webpack。

将JS添加到您的Twig文件

您的某个模板中的某处。

webpack.config.js

对于在symfony项目的根目录中首次创建的任何新{% block javascripts %} {# More stuff here #} {% javascripts '@XBundle/Resources/public/js/build/auth.bundle.js' %} {# More stuff here #} {% endjavascripts %} {% endblock %}运行以下命令：

bundles.js

Answer 2

在Symfomy或其他框架中打字稿下一步安装。

本地

您需要安装npm：

sudo apt-get install npm

将typescript安装为全局：

sudo npm install -g typescript

现在您可以使用命令tsc：
使用命令编译到js
tsc greeter.ts

您可以在bandle create public中设置*.ts文件夹，并在终端中使用tsc命令进行编译。 您可以使用。

本地安装gulp

但如果您创建自动编译，则会安装gulp或grunt：

npm install --global gulp

在项目文件夹中创建package.json（它为经理npm配置文件）

并安装公会gulp-typescript（documentation）

npm install gulp-typescript

在根项目目录中创建gulpfile.js（gulp的tasks文件）。

并按doc中的说明设置任务。

gulp.task('scripts', function() { var tsResult = gulp.src("lib/**/*.ts") // or tsProject.src() .pipe(tsProject()); return tsResult.js.pipe(gulp.dest('release')); });

LOCAL安装angular2

如果想在symfony2中使用angular2。您可以将Angular CLI安装为全局。

npm install -g @angular/cli

在您的包中为angular2创建文件夹（例如：src / AppBundle / Resources / angular2）。这将是symfony中的angular2项目。

在终端
中创建项目
cd src/AppBundle/Resources ng new PROJECT_NAME // angular2

使用API

的symfony
但如果您将DEPLOIYNG服务器配置为在ANPACHE或NGINX中配置重定向到index.html

如果您将create compile amgular2 app部署到dist（ng build），并在您的Web服务器中配置src / AppBundle / Resources / PROJECT_NAME / dist / index.html
的路径

如何在Symfony中设置Typescript？

问题：

我不想要的：

2 个答案:

安装：

配置：

运行

将JS添加到您的Twig文件