在浏览器和测试运行器中将目标从 es5 迁移到 es6

Posted 2023-03-13

【中文标题】在浏览器和测试运行器中将目标从 es5 迁移到 es6

【英文标题】：migrate target from es5 to es6 in browser and test runner

【发布时间】：2022-01-18 19:30:31

【问题描述】：

我在打字稿中有一些代码

DTMEdge.ts DTMNode.ts DTreeMap.ts

编译后的结果

wwwroot js dtree DTMEdge.js DTMNode.js DTreeMap.js

基本上每个 ts 文件看起来像

export class DTxxx 
    ....

DTreeMap.ts 以

开头

import  DTMEdge  from "./DTMEdge";
import  DTMNode  from "./DTMNode";

在 tsconfig.json 中使用 "target": "es5" 我可以：

通过导入在浏览器中使用生成的代码

    <script src="/js/dtree/DTMEdge.js"></script>
    <script src="/js/dtree/DTMNode.js"></script>
    <script src="/js/dtree/DTreeMap.js"></script>

用mocha运行测试，测试文件以：开头

    const assert = require('assert');
    const  DTMEdge = require('../wwwroot/js/dtree/DTMEdge.js');
    const  DTMNode  = require('../wwwroot/js/dtree/DTMNode.js');
    const  DTreeMap  = require('../wwwroot/js/dtree/DTreeMap.js');

当我在 tsconfig.json 中切换到 "target": "es6" 时，我可以：

通过导入在浏览器中使用生成的代码

<script type="module">
    import DTMNode from "./js/dtree/DTMNode.js"
    import DTMEdge from "./js/dtree/DTMEdge.js"
    import DTreeMap from "./js/dtree/DTreeMap.js"

但我无法运行测试并出现以下错误：

...\wwwroot\js\dtree\DTMEdge.js:1
export class DTMEdge 
^^^^^^

SyntaxError: Unexpected token 'export'
...

当我以 es6 为目标时，如何运行测试？

【问题讨论】：

这能回答你的问题吗？ Getting Unexpected Token Export

@gunwin 将每个文件重命名为 .mjs，包括测试文件并使用 import DTMEdge from '../wwwroot/js/dtree/DTMEdge.mjs'; 导入，我坚持使用 来解决问题。但是，我现在失去了使用 Visual Studio 测试资源管理器的能力。我不得不深入研究文档以查看是否可以指定文件扩展 csproj 文件。

【参考方案1】：

解决办法是：

将测试文件重命名为 .mjs 将每个文件复制到 filename.mjs 相应地编辑测试脚本：

import  DTMEdge  from '../wwwroot/js/dtree/DTMEdge.mjs';
import  DTMNode  from '../wwwroot/js/dtree/DTMNode.mjs';
import  DTreeMap   from '../wwwroot/js/dtree/DTreeMap.mjs';

编辑 package.json

  "scripts": 
    "test": "mocha --recursive './tests/*.*js'"
  

等等：

npm 测试

运行。