安裝
es6 7等轉(zhuǎn)譯 es5
yarn add @babel/core @babel/cli @babel/preset-env
配置
- 新建 .babelrc
- 添加內(nèi)容如下：
presets：一組 Babel 插件和/或 [options] 配置的可共享模塊
plugins：插件
preset-env：https://www.babeljs.cn/docs/babel-preset-env
{
"presets": [
"@babel/preset-env"
],
"plugins": []
}
demo
src/index.js
const a = () => {
console.log(222)
}
a()
class Foo {
method() {}
}
終端輸入：npx babel src --out-dir build
解釋下：執(zhí)行babel轉(zhuǎn)譯，將src文件夾下js的文件咖杂，轉(zhuǎn)譯輸出到 build（自動創(chuàng)建）文件夾下
image.png
生成如下代碼：
image.png
箭頭函數(shù)和class關(guān)鍵字都已經(jīng)轉(zhuǎn)成es5
結(jié)合webpack
有2種方式在webpack中庆寺，配置babel
安裝
yarn add @babel/core @babel/cli @babel/preset-env babel-loader
// 如果需要轉(zhuǎn)react則在加 @babel/preset-react
2種方式都需要如下基礎(chǔ)webpack.config.js 配置：
module:{
rules:[
{
test: /\.js$/,
use: ['babel-loader']
}
]
}
第一種 新建.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
]
}
在執(zhí)行webapck打包的時候，會自動讀取.babelrc的配置
第二種配置都集中webpack中配置
module:{
rules:[
{
test: /\.js$/,
use: {
loader:'babel-loader',
options:{
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins:[]
}
}
}
]
}
建議使用第一種配置方式
