跳到内容

使用 Webpack Encore 启用 TypeScript (ts-loader)

编辑此页

想要使用 TypeScript 吗?没问题!首先,启用它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack.config.js

  // ...
  Encore
      // ...
+     .addEntry('main', './assets/main.ts')

+     .enableTypeScriptLoader()

      // optionally enable forked type script for faster builds
      // http://npmjs.net.cn/package/fork-ts-checker-webpack-plugin
      // requires that you have a tsconfig.json file that is setup correctly.
+     //.enableForkedTypeScriptTypesChecking()
  ;

然后在项目根文件夹(或你的 TypeScript 文件所在的文件夹;例如 assets/)中创建一个空的 tsconfig.json 文件,内容为 {}。在 tsconfig.json 中,你可以定义更多选项,如 tsconfig.json 参考 中所示。

然后重启 Encore。当你这样做时,它会给你一个你可以运行的命令来安装任何缺失的依赖项。运行该命令并重启 Encore 后,你就完成了!

你 require 的任何 .ts 文件都将被正确处理。你还可以通过 enableTypeScriptLoader() 方法配置 ts-loader 选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// webpack.config.js
  Encore
      // ...
      .addEntry('main', './assets/main.ts')

-     .enableTypeScriptLoader()
+     .enableTypeScriptLoader(function(tsConfig) {
+         // You can use this callback function to adjust ts-loader settings
+         // https://github.com/TypeStrong/ts-loader/blob/master/README.md#loader-options
+         // For example:
+         // tsConfig.silent = false
+     })

          // ...
  ;

查看 Encore 的 index.js 文件 获取详细文档,并查看 tsconfig.json 参考关于 Typescript 的 Webpack 指南

如果 React 已启用(.enableReactPreset()),任何 .tsx 文件也将由 ts-loader 处理。

本作品,包括代码示例,根据 Creative Commons BY-SA 3.0 许可协议获得许可。
目录
    版本