webpack+react+typescript简单配置指南

Posted 2021-04-25 IVWEB社区

webpack+react+typescript简单配置指南

1、webpack添加ts-loader

以下例子使用的是webpack3。

先在命令行安装依赖：

npm i babel-core babel-loader babel-preset-env babel-preset-react ts-loader tsconfig-paths-webpack-plugin typescript -D

然后为webpack.config.js添加以下loader：

rules: [{
 test: /(\.js(x?)$|\.ts(x?)$)/,
 exclude: /node_modules/,
 use: [
 loaders: [
        { loader: 'babel-loader' },
        {
 loader: 'ts-loader',
        },
      ]
    ]
]

然后创建.babelrc文件，写入以下内容：

{
  "presets": [ [ "env", { "modules": false } ], "react" ] }

这样webpack的loader就配置好了。

2、配置tsconfig.json

tsconfig.json是typescript编译器的配置文件，需要虽然不指定也能run，但是要配合webpack用起来顺心的话，是必须要配置的。

vscode编辑器对ts的支持很好，推荐使用微软自家的vscode编辑器。在编辑tsconfig文件的时候，需要提示的地方按ctrl+whitespace就可以看到各属性的解释，非常方便。

在根目录创建tsconfig.json文件，写入以下内容：

{
  "compilerOptions": {
    "baseUrl": "./src",    //你的工程src根目录
    "traceResolution": false,   //在debug的时候可以设置为true，这个属性的具体用法见下文
    "sourceMap": true,   //这个都知道，debug的时候打开吧
    "allowJs": true,   //是否允许工程中js和ts同时存在。
    "checkJs": true,   //是否对js文件开启静态检查，如果true的话，你的js文件中就可能很多红色的波浪线了。
    "jsx": "react",    //react工程必备
    "target": "es5",    //编译的目标语言，当然是最老的es5
    "module": "es2015",   //模块引入方式，如果你想用import的话
    "moduleResolution": "node",    //模块搜索方式，按照node的来，一般没有说明异议
    "allowSyntheticDefaultImports": true,   //见下文
    "noImplicitAny": false,   //见下文
    "noUnusedLocals": false,   // true: 如果有未使用的块级变量，编译器会报错。
    "noUnusedParameters": false,   // true: 如果有未使用的参数，编译器会报错。鉴于js的动态性，这个我一般关掉
    "removeComments": false,   // 删除注释，debug的时候不开启
    "preserveConstEnums": false,   // 见下文 
    "skipLibCheck": false,    // 跳过lib文件的静态检查，哎，不是所有的lib都给你写得规规整整的。
    "experimentalDecorators": true   // 要实用装饰器语法的话，打开该项
  },
  "include": [
    "./src/**/*"
  ],
  "files": [    //我一般将全局申明的type文件放到这里。原因见下文。
    "./types/index.d.ts",
    "./types/polyfill.d.ts"
  ]
}

traceResolution的用法

简单的说，例如，当我们在工程引用import ClickHelper from 'utils/click'的时候，typescript编译器需要知道去哪里找它，如果ts编译器找不到，你感觉很奇怪，就可以开启traceResolution: true让ts编译器打印模块寻址的过程，很容易就debug到问题点。详细的ts编译器模块搜索路径请看这篇官方的文档。

allowSyntheticDefaultImports的用法

一般来说，如果一个模块没有用export default 导出，那么，你要用import Foo from 引入的话，是会失败的，改用import * as Foo才会编译通过。但是如果开启了allowSyntheticDefaultImports选项，就可以不用如此费劲了。所以我们一般将这个编译选项打开。

noImplicitAny用法

如果打开了此选项，你创建了如下方法是会报错的：

export function foo(data){
  // do something...
}

原因是你没有申明参数data的类型，data拥有一个隐式的any类型。ts既然是一个强类型的语言，类型的定义是ts的优势，既然你选择了ts，那就请尽量将这个选项打开，让ts提醒你有个变量没有申明类型。这样也可以减少错误率。

我一版是H5工程关闭此选项，node工程开启此检查。

preserveConstEnums用法

ts默认将常量的枚举类型替换为值，有点像宏。例如官方给出的例子：

const enum Comparison { 
    LessThan = -1,  
    EqualTo = 0,  
    GreaterThan = 1  
}

var x = Comparison.EqualTo;  // Ok, replaced with 0 in emitted code  
var y = Comparison[Comparison.EqualTo];  // Error

Comparison编译后不再是一个对象，直接被替换为了值。如果你想保持枚举类型的灵活性，可以将这个配置置为true。

全局申明的type文件。

type文件以.d.ts结尾，价值等同于头文件。ts已经默认声明了很多通用的头文件，你可以再vscode中敲一个window，然后command+鼠标左键点进去看。你会发现里面别有洞天。这是我最喜欢ts的地方，还需要什么文档？有type文件就够了！

但是我们工程中经常会定义一些自定义的变量，比如window.__report__之类的，可能是外部引入的。没有声明过的对象在ts中就会报错，怎么解决这样的问题？当然是申明一下就好啊~~

创建一个base.d.ts文件，然后写入以下内容：

interface Window {
  __report__: (msg:string)=>boolean;
}

declare var window: Window;

这样你的变量就不会报错了。或者你想一劳永逸，也可以定义一个万能的对象，当然一般不推荐这么干：

interface Window {
  [otherProp: string]: any;
}

declare var window: Window;

同理，由于js目标版本造成的Object.assign未定义，Promise.all未定义等等，都可以用这种方法解决。注意，这只是一个申明文件，影响ts的静态检查，告诉ts这段代码没有错！并不会影响编译后的代码。

3、可以run起来了。

说了这么多，其实有更方便方法的。我放了一个bolerplate到自己的github上，欢迎前去clone

4、ts的应用场景

ts适合数据结构复杂，交互复杂的工程。这种工程一般模块众多，交互复杂，需要多人协同开发。想当年，ts还没有火起来，团队还在用基于事件的编程泛型写富文本应用的时候，看代码真的是很累的一件事。鬼知道这个emit跳到哪里去了~鬼知道这个方法还有第三个参数等等。这一切，当有了ts之后瞬间变得愉快了起来。想想在node端，被函数参数类型支配的恐惧