webpack的ES6支持与Babel

Babel安装与说明

在webpack中只能处理一部分ES6语法,一些更高级的ES6或ES7语法不能处理,这是就需要第三方的loader来处理这些语法。

通过Babel,可以帮我们完成这一转换。

安装

  • 在webpack,通过运行如下两套命令,安装两套包,安装Babel相应的loader功能;

    • 第一套包:npm i babel-core babel-loader babel-plugin-transform-runtime -D

    • 第二套包:npm i babel-preset-env babel-preset-stage-0 -D

配置

webpack配置文件中

{test: /\.js$/ , use : 'babel-loader' ,exclude: /node_modules/ }
  • 注意:在配置babel的loader规则时,必须把node_modules目录通过,exclude选项排除掉,原因有两个:

    • 避免无意义的转换 否则 Babel 会把 node_modules 中所有的 第三方 JS 文件,都打包编译

    • 转换完毕,项目也无法正常运行

.babelrc配置

.babelrc属于JSON格式,在写配置的时候,必须符合JSON语法规范: 不能写注释,字符串必须用双引号

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

bug


解决方案
npm uninstall -D babel-loader卸载babel-loader,指定npm install -D babel-loader@7的版本安装。

几点说明

  • 第一套包:npm i babel-core babel-loader babel-plugin-transform-runtime -D 第一套包为babel的转换工具

  • 第二套包:npm i babel-preset-env babel-preset-stage-0 -D第二套包为babel的语法

  • 第一套包只负责转换,是转换器,但不知道对应关系

  • 第二套包只负责对应关系

  • babel-preset-env是比较新的ES语法插件,之前我们安装的是babel-preset-se2015,但我们安装的这个babel-preset-env包含了所有ES相关的语法。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容