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