webpack4安装babel

最新推荐文章于 2020-09-25 13:49:41 发布

你的晚晚

最新推荐文章于 2020-09-25 13:49:41 发布

阅读量355

点赞数

分类专栏： webpack vue.js

本文链接：https://blog.csdn.net/weixin_42869547/article/details/96577632

版权

本文介绍了如何在webpack4中安装和配置babel，以避免代码体积过大。首先，通过安装babel-plugin-transform-runtime来禁止babel对每个文件的runtime注入。然后，解决因使用高级语法导致的浏览器不支持问题，需要安装相应的babel插件。接着，配置webpack，将babel-loader添加到module的loaders列表中。在配置过程中，可能会遇到报错，需检查插件名称和安装状态。

摘要由CSDN通过智能技术生成

1. 第一步安装

npm install -D babel-loader @babel/core @babel/preset-env webpack

babel 在每个文件都插入了辅助代码，使代码体积过大，下面的配置禁用了 babel 自动对每个文件的 runtime 注入，而是引入 babel-plugin-transform-runtime 并且使所有辅助代码从这里引用。

npm install --save-dev @babel/plugin-transform-runtime

使用 npm install babel-runtime --save 把 babel-runtime 安装为babel-plugin-transform-runtime的一个依赖。

npm install --save @babel/runtime

遇到下面的报错 Support for the experimental syntax 'classProperties' isn't currently enabled

.....\src\main.js: Support for the experimental syntax 'classProperties' isn't currently enabled (8:15):

   6 | class Person {
   7 |
>  8 |   static info = { name: 'zs', age: 20 }
     |               ^
   9 | }
  10 |
  11 |

这是因为在js中写了高级语法,浏览器不支持