新版vue-cli工具生成的项目,如何配置babel,使之可以在node中使用es6+的语法

本文行文条件是基于 vue-cli3 构建的项目,在 vue-cli4 中依然可用; 同时,在其他类型的项目中,如果是此类问题,依然可以适用。

导读(写在前面)

使用新版的 vue-cli 工具生成的项目,在项目结构上,以及配置文件上都与之前有了很大的不同,而且新版的 vue-cli 给你做了很多默认的配置,可能会给你带来一些困扰,让你有点找不到方向。(因为现在你甚至都不知道配置文件在哪;啊哈哈哈~~你说难不难受)
在这里插入图片描述

点评:我觉得挺好的,新版的这个脚手架工具挺好的,新建一个项目变得简单了,而且可以保存自己的配置和偏好,后续新建项目就变得很轻松了,有利于团队规范。
代码结构变得比以前清爽了,感觉更高级。

ok,话不多说,我们回到文章主题: 我们现在要在项目的 server 层(也就是node)中使用一些 es6 的语法

方案一

1、安装相关的 babel 依赖

npm i @babel/register @babel/preset-env -D

2、使用

在你的 node 代码中,要使用 es6 语法之前,加上以下代码:

require('@babel/register')({
  presets: ['@babel/preset-env']
})

3、重启项目(【ok,启动成功】)

可是,随着代码的继续编写,我使用了更多的 es6 语法;当我使用数组的解构赋值( [...strArr] )的时候,又报错了:

(function (exports, require, module, __filename, __dirname) {
  import arrayWithoutHoles from "./arrayWithoutHoles";
  ...

4、修改 babel.config.js 文件:(注意:下面代码中,+表示新增, -表示去掉或者注释掉)

module.exports = {
  presets: [
+     ['@vue/app', {
+       useBuiltIns: 'entry'
+     }]
-    // '@vue/app'
  ],
  ...
}

5、重启项目(【ok,启动成功】)

关于第 4 步的解释说明: 一个默认的 Vue CLI 项目,useBuiltIns 的默认值是 usage。正如文档中所说的那样:【这确保了最终包里 polyfill 数量的最小化。然而,这也意味着 如果其中一个依赖需要特殊的 polyfill,默认情况下 Babel 无法将其检测出来。

使用 useBuiltIns: 'entry,这会根据 browserslist 目标导入所有 polyfill,这样你就不用再担心依赖的 polyfill 问题了,但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

方案二

Logo

前往低代码交流专区

更多推荐