支持部分IE

.browserslistrc

[production]
> 1%                          支持全世界大于百分之一的浏览器
ie 9                          支持IE9
[modern]
last 1 chrome version         支持最新的chrome版本
last 1 firefox version        支持最新的firefox
[ssr]
node 12                       一般不用 跑在node上

babel-loader打包JS

https://webpack.js.org/loaders/babel-loader/

• 安装babel依赖
  • yarn add babel-loader @babel/core @babel/preset-env webpack --dev
• 配置webpack.config.js

  module.exports={
  mode:'production',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env']
            ]
          }
        }
      }
    ]
  }
  }

  babel-loader打包JSX

  https://babeljs.io/docs/en/babel-preset-react
  λ yarn add @babel/preset-react --dev

  module.exports={
  mode:'production',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react']
            ]
          }
        }
      }
    ]
  }
  }

  webpack配置ESLint插件

  保证IDE的ESlint
  /.eslintrc.js

  module.exports = {
  extends: ['react-app'],
  rules: {
    'react/jsx-uses-react': [2], //0  不报错  2 报错  1警告
    // 提示要在 JSX 文件里手动引入 React
    'react/react-in-jsx-scope': [2]
  }
  }

  保证Webpack的ESlint
  λ yarn add eslint-webpack-plugin --dev

  const ESLintPlugin = require('eslint-webpack-plugin')
  module.exports={
  mode:'production',
  plugins:[new ESLintPlugin({
      extensions:['.js','.jsx'] //不加 .jsx 就不检查jsx文件
  })],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react',{runtime:'classic'}]
            ]
          }
        }
      }
    ]
  }
  }

  babel-loader打包TypeScript

  λ yarn add @babel/preset-typescript --dev

  const ESLintPlugin = require('eslint-webpack-plugin')
  module.exports={
  mode:'production',
  plugins:[new ESLintPlugin({
      extensions:['.js','.jsx'] //不加 .jsx 就不检查jsx文件
  })],
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react',{runtime:'classic'}],
              ['@babel/preset-typescript']
            ]
          }
        }
      }
    ]
  }
  }

  ESLint支持TypeScript

  λ yarn add eslint-config-airbnb-typescript --dev
  /webpack.config.js

  ...
  module.exports={
  ...
  plugins:[new ESLintPlugin({
      extensions:['.js','.jsx','.ts','tsx'] //不加 .jsx 就不检查jsx文件
  })],
  ....
  }

  /.eslintrc.js

  module.exports = {
  extends: ['react-app'],
  rules: {
    'react/jsx-uses-react': [2],
    // 提示要在 JSX 文件里手动引入 React
    'react/react-in-jsx-scope': [2]
  },
  overrides: [{
    files: ['*.ts', '*.tsx'],
    parserOptions: {
      project: './tsconfig.json',
    },
    extends: ['airbnb-typescript'],
    rules: {
      '@typescript-eslint/object-curly-spacing': [0],
      'import/prefer-default-export': [0]
    }
  }]
  }

  /tsconfig.json 这个文件要有

babel-loader打包TSX

λ npx tsc --init
/tsconfig.json 改动

...
 "jsx":"react",
 "strict":false,
 "noImplicitAny":true
...

JS和TS支持@alias

JS

webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin')
const path = require('path')
module.exports={
  mode:'production',
  plugins:[new ESLintPlugin({
    extensions:['.js','.jsx'] //不加 .jsx 就不检查jsx文件
  })],
  resolve:{
      alias:{
        '@':path.join(__dirname,'./src/')
    }
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react',{runtime:'classic'}],
              ['@babel/preset-typescript']
            ]
          }
        }
      }
    ]
  }
}

TS

/tscongfig.json

...
    "baseUrl":".",
    "paths":{
      "@/*":["src/*"]
  }
...