使用 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 许可协议获得许可。