vue-cli3.x、vue-cli4.x中,想要在node中使用es6的语法,该如何配置babel
新版vue-cli工具生成的项目,如何配置babel,使之可以在node中使用es6+的语法导读(写在前面)方案一方案二本文行文条件是基于 vue-cli3 构建的项目,在 vue-cli4 中依然可用; 同时,在其他类型的项目中,如果是此类问题,依然可以适用。导读(写在前面)使用新版的 vue-cli 工具生成的项目,在项目结构上,以及配置文件上都与之前有了很大的不同,而且新版的 vue-...
本文行文条件是基于 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 所以最终的包大小可能会增加。
方案二
更多推荐
所有评论(0)