学习TypeScript在React中的使用

一、目录结构

React-TypeScript
|—— build                   webpack文件配置
│     ├── webpack.dev.js    具体配置文件
|—— src                     React组件定义
|—— public                  静态资源目录
│     ├── dist              webpack打包输出位置

二、TypeScript配置

2.1 安装 TypeScript 和 tslint

  npm install typescript tslint tslint-react --save-dev

创建 tsconfig.json 文件：

tsc --init

配置 tsconfig.js 文件:

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom", "es2015", "es2015.promise"], /* Specify library files to be included in the compilation. */
    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    "baseUrl": "src",                       /* Base directory to resolve non-absolute module names. */
    "paths": {
      "@/*": ["./*"],
    },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  },
  "include": [
    "./src/**/*"
  ]
}

2.1 安装声明包和 loader

安装 react，react-dom 以及它们的声明包 @types/react，@types/react-dom。然后安装必要的 loader 并在 webpack 中进行配置:

npm install awesome-typescript-loader --dev
npm source-map-loader --dev

推荐阅读: https://juejin.im/post/595cc34ff265da6c3d6c262b

三、webpack 基本配置

3.1 打包文件入口和出口

entry: {
  learn: [resolve('src/learn/index.js')],   //入口
},
output: {
  path: resolve('public/dist/'),   //出口
  filename: '[name].min.js',       //打包后文件名
  sourceMapFilename: '[name].min.map.js', //sourceMap文件名
  publicPath: '/dist/'，       //打包文件在内存中的位置，可参考 https://juejin.im/post/5ae9ae5e518825672f19b094
},

3.2 reslove 基本配置，打包的模块目录，文件扩展名

resolve: {
  modules: [ //配置webpack去哪些目录下寻找第三方模块。
    resolve('src/'),
    resolve('node_modules'),
  ],
  extensions: ['.ts', '.tsx','.js', '.jsx', '.json'] //省略文件后缀式的加载策略
},

3.3 解析文件使用的 loader

注意在使用这些 loader 时，都需要提前 npm install/yarn add 这些包

module: {
  rules: [
    {
      test: /\.ts[x]?$/,
      loader: "awesome-typescript-loader"
    },
    { enforce: "pre", 
      test: /\.ts[x]$/, 
      loader: "source-map-loader" 
    },
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      include: [resolve('src/')], //include指定解析的目录
    },
  ]
},

关于 babel-loader 可以在根目录下新建 .babelrc 文件进行更为详细的参数设置, 同样也要记得先安装好这些包才能使用哦:

{
  "presets": [
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties" //class语法编译
  ]
}

3.4 plugins 插件设置

plugins: [
  new webpack.DefinePlugin({  //https://www.webpackjs.com/plugins/define-plugin/
      'process.env': isProd? 'production' : 'development', //类似于全局变量
  }),
  new webpack.HashedModuleIdsPlugin({}),
  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.HotModuleReplacementPlugin(), // 引入热更新插件(引用react热更新必须设置)，
  new webpack.ProvidePlugin({               // 避免引入React的麻烦
      'React': 'react',
  }),
  new CheckerPlugin(),
],

3.5 devServer 参数设置

devServer: {
  contentBase: resolve('public'), //读取文件目录
  compress: false,                //是否gzip压缩
  hot: true,                      //是否热更新
  host: '0.0.0.0',                // host 设置
  port: 8180,                     //端口号
}

具体内容可以在 ./build/webpack.dev.js 中进行查看

3.6 package.json 配置

最后只需要在根目录下的package.json文件中的script下配置dev指令:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js --progress --hot"
},

现在我们就可以通过 npm run dev 启动我们的最小项目了:D