webpack中解决ES6或更高级语法的解决方案

最新推荐文章于 2025-07-03 09:13:34 发布

原创最新推荐文章于 2025-07-03 09:13:34 发布 · 2.2k 阅读

CC 4.0 BY-SA版权

在webpack中，默认只能处理部分ES6新语法，更高级的ES6或ES7语法需借助第三方loader。可通过Babel将高级语法转换为低级语法，介绍了安装Babel相关loader的命令，还说明了webpack配置文件和.babelrc配置文件的设置要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack中解决ES6或更高级语法的解决方案

/ import***from***是ES6中导入模块的方式
//由于ES6的代码太高级，浏览器解析不了，所以会报错
import $ from 'jquery'

在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6或ES7语法webpack是处理不了的：这时候就需要借助于第三方的loader，来帮助webpack处理这些高级的语法，当第三方loader把高级语法转为低级语法之后，就会把结果交给webpack去打包到bundle.js中

通过bable,可以帮我们将高级语法转换为低级语法
在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配置文件，在module节点下的rules数组中，添加一个新的匹配规则

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

注意，在配置bable的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉，原因有两个。1.如果不排除node_modules，这babel会把node_modules中所有的第三方js文件，都打包翻译，这样会非常消耗cpu,同时打包速度非常慢。2.哪怕bable把所有的node_modules中的js文件转换完毕了，但是,项目也无法正常运行！

在项目的根目录下，新建一个叫做.babelrc的babel配置文件，这个配置文件属于JSON格式，所以在写.babelrc配置的时候，必须符合JSON语法规范，不能写注释，字符串必须用双引号
babelrc配置如下

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