配置babel_【webpack实践】配置babel，使用react

正常情况下，大多数浏览器只能支持ES5的语法，react语法是不能识别的，需要进行babel的配置，将react的语法的代码转换为ES5的语法供浏览器解析执行

1 在package.json中安装需要的依赖

... 
  "dependencies": {
    "@babel/runtime": "^7.12.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.23.0",
...
  }

npm install 进行安装

2 配置 webpack.config.js ，针对js jsx结尾的文件配置不同的转码器

   ... 
   module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: ['babel-loader'],
                exclude: /node_modules/,
            }
        ]
    },

3 配置.babelrc(babel-loader 会默认加载主工程目录下的.babelrc，而其内部就是转码的规则)

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    "babel-polyfill",
    "transform-decorators-legacy"
  ]
}

这里表明先用stage-0 转码器转， 再用react转码器转， 最后用ES2015（ES6）转码器转

插件

transform-decorators-legacy： 用于babel6 获取babel7的特性

babel-polyfill： 用于转码一些ES2015 不提供的特殊语法的转码规则

4 配置好后，运行或打包项目。在浏览器中运行即可看到react代码成功在浏览器中运行

源码：

ZhongJinHacker/react-practise​github.com