WebPack TypeScript
WebPack TypeScript
是 JavaScript 的超集,为其了类型系统,可以编译为普通的 JavaScript 。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行集成。
基础安装
首先,执行以下命令,安装 TypeScript 编译器(compiler)和 loader:
npm install --save-dev typescript ts-loader
现在,我们将目录结构和:
project
webpack-demo |- package.json + |- tscon.json |- webpack.con.js |- /dist |- bundle.js |- index.html |- /src |- index.js + |- index.ts |- /node_modules
tscon.json
这里我们设置基本的配置,来 JSX,并将 TypeScript 编译到 ES5……
{ "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true, "module": "es6", "target": "es5", "jsx": "react", "allowJs": true } }
查看 了解更多关于 tscon.json 的配置选项。
想要了解 webpack 配置的更多信息,请查看配置相关概念。
现在让我们在 webpack 配置中处理 TypeScript:
webpack.con.js
const path = require('path'); module.exports = { entry: './src/index.ts', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
这会直接将 webpack 的入口起点指定为 ./index.ts,然后通过 ts-loader _加载所有的 .ts 和 .tsx ,并且在当前目录_ bundle.js 。
Loader
在本指南中,我们使用 ts-loader,因为它能够很方便地启用额外的 webpack ,例如将其他 web 资源导入到项目中。
Source Map
想要了解 source map 的更多信息,请查看开发指南。
要启用 source map,我们必须配置 TypeScript,以将内联的 source map 到编译过的 JavaScript 。必须在 TypeScript 配置中下面这行:
tscon.json
{ "compilerOptions": { "outDir": "./dist/", + "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", "allowJs": true } }
现在,我们需要告诉 webpack 这些 source map,并内联到最终的 bundle 中。
webpack.con.js
const path = require('path'); module.exports = { entry: './src/index.ts', + devtool: 'inline-source-map', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
查看 devtool 文档以了解更多信息。
使用第三方库
当从 npm 安装第三方库时,一定要牢记同时安装这个库的类型声明。你可以从 中找到并安装这些第三方库的类型声明。
举个例子,如果想安装 lodash 这个库的类型声明,我们可以运行下面的命令:
npm install --save-dev @types/lodash
想了解更多,可以查看。
导入其他资源
要在 TypeScript 里使用非资源,我们需要告诉 TypeScript 如何兼容这些导入类型。那么首先,我们需要在项目里创建 custom.d.ts ,这个用来编写的类型声明。让我们将 .svg 进行声明设置:
custom.d.ts
declare module "*.svg" { const content: any; export default content; }
这里,我们通过指定任何以 .svg 结尾的导入,并将模块的 content 定义为 any,将 SVG 声明新的模块。我们可以通过将类型定义为字符串,来更加显式地将它声明为 url。同样的理念适用于其他资源, CSS, SCSS, JSON 等。
构建
这可能会降低构建。
关于构建工具,请查看构建指南。