原创翻译,转载请注明出处。
原文地址:https://webpack.js.org/guides/webpack-and-typescript/
Typescript是一个类型化的JavaScript的超集,它被编译成纯JavaScript,在这篇指南里我们将会学习怎样统合webpack和Typascript。
基本设定
为了开始webpack和Typescript,首先我们需要在我们的项目里安装webpack,如果你之前没有做这一步,请查看webpack安装指南。
开始在webpack里使用Typescript,需要做几件事情:
- 在项目里安装Typescript编译器。
- 安装Typescript加载器(这里我们使用ts-loader).
- 创建一个tsconfig.json文件,在这里配置Typescript编译。
- 创建一个webpack.config.js,在这里配置webpack。
你可以通过运行以下命令,从npm安装TypeScript编译器和TypeScript加载器。
npm install --save-dev typescript ts-loader
tsconfig.js
开始的时候tsconfig文件可以是一个空的配置文件,这儿你看到的是一个把TypeScript编译成es5,同时提供JSX支持的基本配置的例子。
{ "compilerOptions":{ "outDir":"./dist/", "sourceMap":true, "noImplicitAny":true, "module":"commonjs", "target":"es5", "jsx":"react", "allowJs":true } }
你可以在TypeScript文档站点里了解更多关于tsconfig.js的配置选项。
webpack.config.js
基本的webpack+TypeScript配置是下面几行:
module.exports ={ entry:'./index.ts', output:{ filename:'bundle.js', path: __dirname }, module:{ rules:[ { test:/\.tsx?$/, loader:'ts-loader', exclude:/node_modules/, } ] }, resolve:{ extensions:[".tsx",".ts",".js"] } };
我们指定入口点是当前目录下的index.js文件,输出文件叫做bundle.js,还有TypeScript加载器,负责把TypeScript文件编译成JavaScript文件。我们还加了一个resolve.extensions配置,告诉webpack解析TypeScript模块对象文件都有哪些扩展名。
Typescript加载器
当前可用两种TypeScript加载器:
Awesome TypeScript加载器给出了关于awesome-typescript-loader和ts-loader之间差异的精彩解释。详细可以阅读这里。
在这个指南里我们将使用ts-loader,因为当前它可以相对容易地把webpack各种特性像无代码资源文件一样引入到你的项目里。
允许代码映射
为了允许代码映射,首先必须配置TypeScript,让它在编译后的JavaScript文件里,输出行内代码映射。通过设定sourceMap变量为true来实现:
tsconfig.json
{ "sourceMap":true }
一旦TypeScript被配置成输出代码映射,我们需要告诉webpack让它抽出这些代码映射,并把他们传输到浏览器。这样我们就可以在代码编辑器里看到源文件。
Webpack.config.js
module.exports ={ entry:'./index.ts', output:{ filename:'bundle.js', path: __dirname }, module:{ rules:[ { enforce:'pre', test:/\.js$/, loader:"source-map-loader" }, { enforce:'pre', test:/\.tsx?$/, use:"source-map-loader" } ] }, resolve:{ extensions:[".tsx",".ts",".js"] }, devtool:'inline-source-map', };
首先我们增加了一个新的加载器叫做source-map-loader。
运行以下代码安装:
npm install --save-dev source-map-loader
这个加载器安装万之后,我们需要通过设定enforce: 'pre'这个配置标签,告诉webpack在其他任何加载器之前运行这个加载器。最后通过设定devtool变量,实现在webpack里允许代码映射。当前我们使用’inline-source-map’,阅读devtool文档了解更多这个设定和其他别的配置。
使用第三方库
当从npm安装第三方库的时候,很重要的一点是需要记住一定要安装这个库的typing定义。
你可以从@types仓库里安装第三方库的定义。
例如如果我们想安装lodash,我们可以运行下面的代码取得它的typings:
npm install --save-dev @types/lodash
引入无代码资源文件
通过TypeScript来使用无代码资源文件,我们需要告诉TypeScript怎样顺从这些引入的类型。
为了实现这些我们需要创建一个custom.d.ts文件。这个文件指出我们项目里TypeScript的定制定义。
在custom.d.ts文件里我们需要提供一个关于svg引入的定义,为了实现这个我们需要在这个文件里加入下面的代码:
declaremodule"*.svg"{ const content:any; exportdefault content; }
这里我们为所有以.svg结尾的引入定义了一个新的模块,并把它的类型定义为any。如果我们想明确这是一个URL,我们可以定义类型为字符串。
这不仅适用于svg,还适用于其他你希望使用的定制加载器,包含css,scss,json或者其他你想在项目里引入的文件。
-- End --