webpack 配置 babel

  根据 webpack 版本的不同,安装的 babel 依赖有些区别,下面的是 webpakc 4.2 及以上版本安装的依赖。 4.2 之前的是:babel-corebabel-preset-env

  要配置 babel 首先需要安装 @babel/core,这是 babel 的核心编译包:

cnpm install --save-dev @babel.core

  然后需要安装 babel-loader 来帮助我们加载使用 babel

cnpm i --save-dev babel-loader

  这时候,在 webpack.config.jsrules 的代码是这样的:

module:{
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude:path.resolve(__dirname,'/node_modules'),
            include: path.join(__dirname, 'src_1')
        }
    ]
}

  上面的代码中, exclude 表示不想被 babel 处理的文件目录,include 表示需要被处理的目录,不加 include 的话应该就是会处理除 exclude 以外的其他目录。

  然后,我们可以选择 babel 的解析标准,比如我们需要按照 ES6 的标准来,那么就需要装一个 babel-preset-es2015,若要按照 ES7 的标准,就需要按照 babel-preset-es2016。不过我们可以直接安装一个 @babel/preset-env ,它等价于 babel-preset-latest,可以编译所有新规范的代码:

cnpm install --save-dev @babel/preset-env

  这下,我们的 webpack 中是这样的:

module:{
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            },
            exclude:path.resolve(__dirname,'/node_modules'),
            include: path.join(__dirname, 'src_1')
        }
    ]
}

  presets 中还有其他选项可以帮助我们兼容 js,可根据自己的需求来,具体可看:babel-preset-env

  除了 webpack,我们还需要在工程目录下创建一个 .babelrc 文件,把关于 babel 的配置放进去:

{
    "presets": ["@babel/preset-env"],
}

  一般来说 babel 这样配置就差不多了,不过在 build 的时候项目里在类中的箭头函数处报了错,提示还需要一个插件 @babel/plugin-proposal-class-properties

  因此按照提示安装:

cnpm i --save-dev @babel/plugin-proposal-class-properties

  最后, package.json 就是这样的:

"devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2"
}

  然后还需要修改 .babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

 目录