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

你可能感兴趣的:(React项目中babel 7的使用)