解决不了的难题之@babel/register
问题出现
我在用vue创建项目的时候想用nodejs模拟个后台假数据,nodejs里要支持es6的语法需要使用@babel/register,安装完这个包的版本是7.5.5。然后调用
1 |
require("@babel/register"); |
出错
基本意思是找不到 core-js/modules/es6.regexp.constructor
问题分析
去 @babel/register 全局搜索也没有这行可疑代码
去 package-lock.json 查到使用的core-js为版本3,其他地方都是2,肯定错误就出现在这里
按照常规经验应该降低@babel/register的版本就可以了,在github查到使用最后使用[email protected]版本的为7.3.4,npmjs 官网是7.0.0
1 2 |
https://github.com/babel/babel/blob/v7.3.4/packages/babel-register/package.json https://www.npmjs.com/package/@babel/register/v/7.0.0 |
这里我绕了一些弯路,我卸载755版本,安装700版本,可是package-lock.json包就是不会更新@babel/register下的core-js为2版本,删除node_modules重新装也不行,后来想到清缓存
1 |
npm cache clean --force |
总算把700的包成功安装了,@babel/register下的core-js版本也变为2.5.7
这回应该奇迹出来了吧,失败,还是报图1的错
找es6.regexp.constructor
再去core-js的github
1 2 |
https://github.com/zloirock/core-js/tree/v2/modules 有es6.regexp.constructor https://github.com/zloirock/core-js/tree/v3/packages/core-js/modules 有es.regexp.constructor |
可以看出,3版本不仅改了项目结构,还tm重命名了,降成2是必然的了,至于已经降了为什么不生效呢??
总结
花了3天时间,依然没有解决
n天后看vue-element-admin 发现有如**释说明,原来动态导入需要配置 VUE_CLI_BABEL_TRANSPILE_MODULES=true
1 2 3 4 5 6 7 |
https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js Vue CLI使用VUE_CLI_BABEL_TRANSPILE_MODULES环境变量来控制是否启用Babel插件动态导入节点插件 它只通过将所有import()转换为require()来完成一件事 当你有大量的页面时这种配置可以显著提高热更新的速度 |
缺乏对vue-cli的环境配置知识
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F