在项目中使用Babel

安装 Babel

# 第一套包
npm i babel-core babel-loader babel-plugin-transform-runtime -S

# 第二套包
npm i babel-preset-env babel-preset-stage-0 -S -D

配置 babel-loader

// webpack.config.js
{
    test: /\.js$/,
    use: "babel-loader",
    exclude: /node_modules/ //排除node_modules
}
// 注意排除 `node_modules` 中的 `js` 文件, 否则导致打包速度非常慢, 而且无法运行

配置文件 .babelrc

.babelrc 是一个 JSON 文件, 编写必须符合 JSON 规范。
目前只安装的下面的语法和插件,做如下配置即可

{
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}

错误解决

如果你遇到了编译失败的错误,可以参考这里的说明:

babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

意思是使用 babel 6.x 的版本需要使用 babel-loader@7 版本,重新指定版本安装即可

yarn add babel-loader@7 -S -D
# 或是
npm i babel-loader@7 -S -D

在项目中使用Babel_第1张图片

你可能感兴趣的:(Webpack,Babel,Babel编译失败,Webpack,.babelrc)