[译]webpack官网文档 ：指南 -- 25.webpack&Typescript

原创翻译，转载请注明出处。

原文地址：https://webpack.js.org/guides/webpack-and-typescript/

 

Typescript是一个类型化的JavaScript的超集，它被编译成纯JavaScript，在这篇指南里我们将会学习怎样统合webpack和Typascript。

 

基本设定

为了开始webpack和Typescript，首先我们需要在我们的项目里安装webpack，如果你之前没有做这一步，请查看webpack安装指南。

开始在webpack里使用Typescript，需要做几件事情：

1. 在项目里安装Typescript编译器。
2. 安装Typescript加载器（这里我们使用ts-loader）.
3. 创建一个tsconfig.json文件，在这里配置Typescript编译。
4. 创建一个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-loader
• ts-loader

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

 

通过这个blog获得更过信息。

 

引入无代码资源文件

通过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 --