React项目中babel 7的使用

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

babel 7 核心库简单介绍看下文

简书 rub1cky babel 7试用

babel 7 详细教程看下文

陈三 babel 7 教程

中文官方文档翻译不全，主要还是参考上面那个链接吧

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项，不想自己动手组合插件？没问题！preset 可以作为 Babel 插件的组合，甚至可以作为可以共享的 options 配置。
// plugins项，引用插件来处理代码的转换
// transform-runtime用来处理全局函数和优化babel编译

{
    "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/},
    ]
},