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

› Vue.js

This topic created in 2170 days ago, the information mentioned may be changed or developed.

是提供给 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)

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

Supplement 1 · Jun 7, 2020

回复不支持 markdown，在附言里再添加一下。

找到了一个不算完美的解决方案。

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

参考文章：Import, Export, Babel, and Node

安装

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"]
}

8 replies • 2020-06-08 08:04:42 +08:00

noe132

Jun 7, 2020

关键字 commonjs module, esmodule

selfcreditgiving

Jun 7, 2020

@noe132 #1 我搜网上说 node 9 已经开始支持 import 了，怎么我的 node 10 还不支持呢 https://juejin.im/post/5b87952e6fb9a019e8228aae

selfcreditgiving

Jun 7, 2020

这个文章说 node 9 版本要支持 import 还是要把 .js 改为 .mjs
链接： https://segmentfault.com/a/1190000018677932

selfcreditgiving

Jun 7, 2020

看了一下 stackoverflow，要把所有用到的 js 文件都改为 .mjs 结尾，这样如果我测试的代码又引用了其他代码，，，这样改不太现实啊

https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node

selfcreditgiving

Jun 7, 2020

找到了一个不算完美的解决方案。要老命了，，，

方法是使用 ``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

Jun 7, 2020

直接用 vue-cli 架自带的 test 配置，不用发明自己的一套轮子

selfcreditgiving

Jun 7, 2020

@seki #6 学习了，多谢

rodjerL

Jun 8, 2020 via iPhone

用的 jest 测试？

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

找到了一个不算完美的解决方案。

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

安装

修改 .babelrc

使用 babel-node 执行含有 import 的 js 文件

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

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