webpack配置（一）

.browserslistrc

[production]
> 1%            // 支持大于百分之一的浏览器
ie 9            // 支持ie9

[modern]
last 1 chrome version       // 最近一个版本
last 1 firefox version      // 最近一个版本

[ssr]
node 12                     // ssr node 12

用babel-loader打包js & jsx & ts

webpack虽然可以打包js，但是没有babel功能多。

module.exports = {
    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,                                 // js ts jsx tsx
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: [
                      ['@babel/preset-env'],                         // 处理js
                      ['@babel/preset-react', {runtime: 'classic'}], // react从17版本开始支持两种写法
                      ['@babel/preset-typescript']                   // 处理ts
                    ]
                  }
                }
            }
        ]
    }
}

给webpack配置ESLint插件

.eslintrc.js的配置需要配合编辑器的扩展来使用。

module.exports = {
  extends: ['react-app'],                    // 继承react-app提供的规则
  rules: {
    'react/jsx-uses-react': [2],             // 检查是否使用了React， 0关闭对应检查 1 warn 2 error
    'react/react-in-jsx-scope': 'error'      // 提示要在 JSX 文件里手动引入 React
  }
}

在webpack中配置ESLintPlugin插件

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    plugins: [
        new ESLintPlugin({
            extensions: ['.js', '.jsx', '.ts', '.tsx'] // 按照ESlint的配置检查这四种文件。
        })
    ]
}

让ESLint支持TypeScript

TSLint在2019年就是deprecated状态了，所以使用了ESLint。

修改.eslintrc.js的。

module.exports = {
  extends: ['react-app'], 
  rules: {
    'no-console': [0]           // 关闭console的检查
  },
  overrides: [{
    files: ['*.ts', '*.tsx'],
    parserOptions: {
      project: './tsconfig.json',
    },
    extends: ['airbnb-typescript'],
    rules: {
      '@typescript-eslint/object-curly-spacing': [0],   // 关闭{}内测的空格检查
      'import/prefer-default-export': [0]               // 关闭export default的检查
    }
  }]
}

其中extends: ['react-app']是用来检查js代码的，在overrides中覆盖原有的配置。
airbnb-typescript是通过eslint-config-airbnb-typescript依赖获得的。
ESLint的rules可配置项列表
React的rules可配置项列表

用babel-loader打包TSX

npx tsc --init可以帮助我们初始化一个tsconfig.json文件。

{
  "compilerOptions": {
    
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
   
    /* Strict Type-Checking Options */
    "strict": false,                           /* Enable all strict type-checking options. */
    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */

    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

保留以上配置。

在package.json中增加如下

 "scripts": {
    "lint:fix": "eslint --fix --ext .js,.jsx ."
  },

并在.eslintrc.js中增加"ignorePatterns": ["dist/", "node_modules/"]，防止修复不必要代码。通过运行yarn run lint:fix可以进行代码风格修复。

tips: cr => \r, lf => \n,windows采用\r\n,mac是\r-后采用\n,linux是\n。我们一般都用lf。

让JS和TS支持@alias 别名

修改webpack.config.js，使支持js文件的路径别名。

const path = require('path');

module.exports = {
    resolve: {
        alias: {
          '@': path.resolve(__dirname, './src/')
        }
    }
}

修改tsconfig.json，使支持ts文件的路径别名。

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
}