请问 vue 项目 怎么测试 单 js 文件(import 语法 node 执行会出错)

2020-06-07 00:07:32 +08:00
 selfcreditgiving

是提供给 vue 页面使用的 util 方法的 js 文件。node 版本为 v10.16.3

想测试单个的 util 方法是不是有问题,新建一个测试 js 文件 test.js ,import util 然后手动测试,发现 node 不能使用 import 语法。

会报如下的错误:

import lib from './lib'
       ^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Process finished with exit code 1

也附上要测试两个简单的 js 文件,lib.js 和 test.js

lib.js

function add (a, b) {
  return a + b
}

export default {
  add
}

test.js

import lib from './lib'

lib.add(1, 2)

这个问题一般是怎么解决的呢?

2272 次点击
所在节点    Vue.js
8 条回复
noe132
2020-06-07 00:08:47 +08:00
关键字 commonjs module, esmodule
selfcreditgiving
2020-06-07 00:22:32 +08:00
@noe132 #1 我搜网上说 node 9 已经开始支持 import 了,怎么我的 node 10 还不支持呢 https://juejin.im/post/5b87952e6fb9a019e8228aae
selfcreditgiving
2020-06-07 00:52:42 +08:00
这个文章说 node 9 版本 要支持 import 还是要把 .js 改为 .mjs
链接: https://segmentfault.com/a/1190000018677932
selfcreditgiving
2020-06-07 01:02:17 +08:00
看了一下 stackoverflow, 要把所有用到的 js 文件都改为 .mjs 结尾,这样如果我测试的代码 又引用了其他代码,,, 这样改不太现实啊

https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node
selfcreditgiving
2020-06-07 04:42:53 +08:00
找到了一个不算完美的解决方案。 要老命了,,,

方法是使用 ``babel-node`` 来执行 js 文件。

参考文章:[Import, Export, Babel, and Node]( https://medium.com/@JedaiSaboteur/import-export-babel-and-node-a2e332d15673)

#### 安装
```
npm i babel-cli --save-dev
```

```
npm i babel-preset-env --save-dev
```

#### 修改 .babelrc
将``.babelrc``内容改为如下( vue 脚手架原有的 ``.babelrc``不能运行,后面再说怎么解决这个冲突 )
```
{
"presets": ["env"]
}
```

#### 使用 babel-node 执行含有 import 的 js 文件
```
npx babel-node test.js
```

vue 脚手架 的 ``.babelrc`` 改成 babel-node 可以执行的配置会出错,现在说解决冲突的方法:

自己每次手动切换。。。
```
/*--------------------------- vue 脚手架配置 ---------------------------*/

//{
// "presets": [
// ["env", {
// "modules": false,
// "targets": {
// "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
// }
// }],
// "stage-2"
// ],
// "plugins": ["transform-vue-jsx", "transform-runtime"]
//}

/*--------------------------- 运行 babel-node 时设置如下 ---------------------------*/

{
"presets": ["env"]
}

```
seki
2020-06-07 07:36:01 +08:00
直接用 vue-cli 架自带的 test 配置,不用发明自己的一套轮子
selfcreditgiving
2020-06-07 14:02:55 +08:00
@seki #6 学习了,多谢
rodjerL
2020-06-08 08:04:42 +08:00
用的 jest 测试?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/679303

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX