webpack中babel的配置

比眉伴天荒 2022-05-15 11:35 280阅读 0赞

# 目的：webpack，默认只能解析一部分的ES6的语法，我们需要安装babel插件，来辅助webpack解析语法。 #

### 第一步：安装插件  ###

**1-1：（cnpm i babel-core babel-loader babel-plugin-transform-runtime -D）**

![70][]

** 1-2：（cnpm i babel-preset-env babel-preset-stage-0 -D）**

![70 1][]

### 第二步：在webpack.config.js里面的module里面配置 ###

![70 2][]

###  第三步：创建 .babelrc 并配置 ###

![70 3][]

### 第四步：测试 ###

4-1：我在mian.js里面写了一个高级一点的语法，单纯的用webpack会报错。现在我们来看看安装插件之后的是否会报错

![70 4][]

还是报错了，上面我们第一步安装插件的时候，出现了一个警告。

![70][]

即使安装了还是会报一个错。经过各种测试，发现是插件版本不兼容，

解决办法，就是删除你的node\_modules。把你的package.json对应的插件版本修改如下

"babel-core": "^6.26.0",
            "babel-loader": "^7.1.2",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-stage-0": "^6.24.1",

然后再次重新安装   cnpm i

[70]: /images/20220515/f7f2385eb697486ba0a3b35ce0d9a467.png
[70 1]: /images/20220515/34f0fb3753df47aebe12e1ce0ed6deee.png
[70 2]: /images/20220515/affa81529b6043f7919e32869693bb3d.png
[70 3]: /images/20220515/67cb945e8cc74d2f8dd84f29b1762b09.png
[70 4]: /images/20220515/cebd90bc7e8848a38495ca404a4020a4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关非webpack、cli环境下，babel解析es6代码转为es5，以及grunt中配置babel

非webpack、cli环境下，babel解析es6代码转为es5 在非webpack、cli环境下，引入es6代码，如果不注意直接发布生产，在部分低版本浏览器（IE）或

末蓝、/ 2023年07月21日 05:26/ 0 赞/ 17 阅读

相关 Node.js webpack babel

问题：高级语法，webpack不支持，需要babel来转换 class Person { static info = 'aaa' } 1

墨蓝/ 2023年01月04日 10:29/ 0 赞/ 192 阅读

相关 webpack4.x 配置调试、babel配置编译ESnext、JSX

调试 webpack4.x 开启调试 --mode development webpack3.x之前在webpack.config.js中添加

小灰灰/ 2022年05月28日 14:09/ 0 赞/ 312 阅读

相关 webpack中babel的配置

目的：webpack，默认只能解析一部分的ES6的语法，我们需要安装babel插件，来辅助webpack解析语法。第一步：安装插件 1-1：（cnpm i ba

比眉伴天荒/ 2022年05月15日 11:35/ 0 赞/ 281 阅读

相关手动创建基于webpack+babel的react应用(babel7)

搭建一个React项目环境首先`npm init`生成`package.json`文件. 至此我们就可以安装`react`的相关依赖了。 npm inst

﹏ヽ暗。殇╰゛Y/ 2022年03月07日 10:18/ 0 赞/ 253 阅读

相关从零开始配置webpack(基于webpack 4 和 babel 7版本)

> webpack 核心概念: Entry: 入口 Module:模块，webpack中一切皆是模块 Chunk:代码库，一个chunk由十多个模块组合

悠悠/ 2022年02月19日 01:25/ 0 赞/ 255 阅读

相关 webpack和babel的运行结果分析

webpack模块化原理-commonjs [segmentfault.com/a/119000001…][segmentfault.com_a_119000001]

﹏ヽ暗。殇╰゛Y/ 2022年01月20日 15:17/ 0 赞/ 273 阅读

相关 webpack.config.js====配置babel

参考：https://www.jianshu.com/p/9808f550c6a9 1. 安装依赖 babel-loader: 负责 es6 语法转化

Dear 丶/ 2022年01月06日 04:09/ 0 赞/ 325 阅读

相关 Webpack安装(1)-集成Babel

完整代码详见：[https://github.com/lhtzbj12/webpack-demo][https_github.com_lhtzbj12_webpack-demo

叁歲伎倆/ 2021年09月14日 15:34/ 0 赞/ 363 阅读

相关 webpack4 配置babel兼容js代码、动态Polyfill服务

1、下载 cnpm install -D babel-loader @babel/preset-env @babel/core 全部处理下载:cnp

ゝ一纸荒年。/ 2021年07月24日 17:14/ 0 赞/ 345 阅读