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

[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)

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

回复不支持 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"]
}

[noe132]

关键字 commonjs module, esmodule

[selfcreditgiving]

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

[selfcreditgiving]

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

[selfcreditgiving]

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

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

[selfcreditgiving]

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

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

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

[selfcreditgiving]

@seki #6 学习了，多谢

[rodjerL]

用的 jest 测试？