美文网首页
webpack4中Babel配置

webpack4中Babel配置

作者: 小丘啦啦啦 | 来源:发表于2019-05-10 09:20 被阅读0次

一、说明
webpack,默认只能处理一部分ES6新语法,一些更高级处理不了(ES2015+的语法)。
需要借助第三方loader来帮忙处理成低级点的语法,再把结果交给webpack打包编译处理。
通过Babel可以帮助处理ES6+高级语法。
二、安装

  • npm install -D babel-loader,安装babel-loader。安装完成会提示需要安装对应版本的babel-core。

  • 根据提示安装对应版本的babel-core。npm i @babel/core@^7.0.0 -D(7.x可以直接npm i @babel/core -D),babel 的 node API 已经被移到 babel-core。

  • npm i @babel/preset-env -D,提供语法转换对应关系(转换字典)。babel有几种规则都可以实现对ES6语法的转码,官方现已建议采用babel-preset-env。

  • 可能会报错:



    这是因为 babel 的版本冲突,babel-loader 8.x对应babel 7.x以此类推。

三、配置
1、增加匹配规则
webpack.config.js中增加匹配规则:

module.exports = {
    module:{  
        rules:[   
            {
                test:/\.js$/,   //匹配JS文件  
                use:'babel-loader',
                exclude:/node_modules/   //排除node_modules目录
            }
        ]
    }
}

需要排除node_modules目录,此目录下都是现成的包(已打包编译过),重新打包耗资源、运行项目报错。
2、Babel配置文件

  • 在项目根路径下创建名为 .babelrc 的Babel配置文件(规范的JSON格式,无注释、字符串必须双引号等等),配置规则。
    plugins插件;presets预设、语法。
{
    "presets": ["@babel/env"]
}
  • 也可以在package.json中配置。
"babel":{
   "presets": ["@babel/env"]
}

相关文章

网友评论

      本文标题:webpack4中Babel配置

      本文链接:https://www.haomeiwen.com/subject/jroeoqtx.html