React项目中babel 7的使用

如果你用过 babel 6，可能要问，怎么不是 npm i babel-core -D？@ 符号又是什么？这是 babel 7 的一大调整，原来的 babel-xx 包统一迁移到babel 域下 - 域由 @ 符号来标识，一来便于区别官方与非官方的包，二来避免可能的包命名冲突。

安装命令

处理JSX语言

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D

处理ES6语言

npm i @babel/plugin-transform-runtime -D

npm i @babel/runtime -S

配置

.babelrc文件

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-runtime"]
}

webpack.config.js文件

module.exports中添加：

module:{ //所有第三方模块的配置规则，只要webpack处理不了的，都会来这里找
    rules:[
        {test:/\.(js|jsx)$/,use:'babel-loader',exclude:/node_modules/},
    ]
},

相关链接

陈三 babel 7 教程

Babel 中文文档（其实是小半个中文）