TypeScript的开发环境配置

September 14, 2020 ... ☕️ 3 min read

从ts文件到浏览器可用的js文件,实际经过了两个步骤:从ts编译到js文件,从js文件(可能用了es6语法)编译到浏览器可用版本。第一步ts文件的编译是固定的,需要webpack配置loader、配置tsconfig.json,第二步,一般就使用babel-loader,需要配置babelrc文件。

官方starter

webpack配置

配置webpack,解析.ts/tsx文件 babel6不能解析TypeScript文件,需要配合ts-loader使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // ...
        loader: "babel-loader"
      },
      {        test: /\.ts$/,        use: "ts-loader"      },    ]
  }
}

babel7可以直接编译TypeScript文件,可以把ts-loader干掉。新坑用这个就没问题了。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,        // ...
        loader: "babel-loader"
      },
    ]
  }
}

babel配置

babel配置文件.babelrc.js

module.exports = {
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    'react-hot-loader/babel'
  ],
  presets: [
    ['@babel/preset-env', { targets: { browsers: 'last 2 versions' } }],
    '@babel/preset-typescript',
    '@babel/preset-react'
  ]
};

tsconfig.json配置

tsconfig.json是TypeScript的配置文件,用于指定该目录下文件的编译方式,例如包括哪些文件、排除,编译选项(目标代码版本、module方式、jsx配置等)。要注意的是,并不是webpack要使用,而是TypeScript编译器使用。例如直接通过tsc命令也可以编译。

在根目录直接输入tsc回车,或者编译单个文件(命令行同名选项会覆盖config配置) tsc --outFile index.js --target es5 --module amd index.ts

一个tsconfig.json例子

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@common/*": ["src/common/*"],
    }
  },
  "include": ["src"],
  "compileOnSave": false
}

经过上面的配置,就可以正常编译出js文件了。

启用类型检查

但是TS的特性,例如类型检查并不支持,编译都会成功,因为eslint是在js编译过程使用的。

这个和tsconfig.json里配置了paths一样,在ts文件里使用这个别名没问题,但是编译会出错,原因就是js编译的时候并不能取得这个别名,需要配置resolve.alias

启用类型检查,可以在package.json里使用命令

scripts: {
  "type-check": "tsc --noEmit",
  "type-check:watch": "npm run type-check -- --watch",
}

就可以使用类型检查,正常排除错误。但是单独起一个进程来检查有点不合算,而且两边结果不一致,看着也很别扭。可以使用fork-ts-checker-webpack-plugin插件来做到这个。

module.exports = {
  // ...
  plugins: [
    // ...
    new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: "./src/**/*",
      },
    }),
  ]
}

fork-ts-checker-webpack-plugin创建了一个新的进程,专门进行TS的类型检查。async设置为false的意思是,要求webpack同步等待这个插件完成检查,然后再返回结果信息。

如果启用了dev-server,可以看到,warning等信息会实时显示在devTools控制台。如果不想要这些输出,可以配置webpack-dev-server的log等级:

module.exports = {
  devServer: {
    // ...
    clientLogLevel: 'error'
  }
}

#TypeScript#webpack

SideEffect is a blog for front-end web development.
Code by Axiu / rss