TypeScript ES动态`import()` [英] TypeScript ES dynamic `import()`

问题描述

虽然使用了新的TypeScript功能，即所谓的 ES动态导入，但我不是能够使用ts-node在服务器端运行同构应用程序的代码.

While using the new TypeScript feature, so called ES Dynamic Imports, I am not able to run the code of my isomorphic app on the server side using ts-node.

使用webpack模块加载器以自己的方式编译代码并在浏览器中运行生成的文件时，似乎不会发生该错误.

It seems like the error does not occur when using the webpack module loader which transpiles the code in it's own way and running resulting files in a browser.

我得到的错误:

case 0: return [4 /*yield*/, import("./component/main")];
                             ^^^^^^
SyntaxError: Unexpected token import

通常TypeScript将import表达式转换为类似的内容:Promise.resolve(require("./component/main"))，但是我在那里看不到它.

Usually TypeScript transpiles the import expression to something like that: Promise.resolve(require("./component/main")), but I can't see it there.

该如何解决?它与ts-node有共同之处吗?还是有node.js的"polyfill"?

How to fix that? Does it have something common with ts-node? Or there is a "polyfill" for node.js?

我的tsconfig.json文件:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "allowJs": false,
    "experimentalDecorators": true,
    "importHelpers": true,
    "inlineSourceMap": false,
    "inlineSources": false,
    "lib": [
      "DOM",
      "ES5",
      "ES6",
      "ES7"
    ],
    "listFiles": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "preserveConstEnums": false,
    "pretty": false,
    "removeComments": false,
    "strict": true,
    "target": "es5"
  }
}

代码:

import * as m from "mithril";

import LayoutComponent from "./component/layout";

const render = (
    layout: m.ComponentTypes<any, any>,
) => ({ tag, attrs }: m.Vnode<any, any>) => m(layout, attrs, m(tag as any, attrs));

export default {
    "/:path...": {
        onmatch: async (args, path) => (await import("./component/main")).default,
        render: render(LayoutComponent),
    },
} as m.RouteDefs;

推荐答案

这是错误在Typescript编译器中，将在 2.5 中进行修复.

This is a bug in the Typescript Compiler which will be fixed in 2.5.

使用导入文件 的函数导出默认对象将不会在Typescript 2.4.x中将import语句编译为require语句 .

Exporting a default object with a function that imports a file will not compile the import statement into a require statement in Typescript 2.4.x.

例如，与此同时:

export const sudo = { run() { return import('./test3'); } }

将编译为此:

exports.sudo = { run: function () { return Promise.resolve().then(function () { return require('./test3'); }); } };

此:

export default { run() { return import('./test3'); } }

编译为:

exports.default = { run: function () { return import('./test3'); } };

这显然是错误的.临时解决方案是这样:

Which is obviously wrong. A temporary solution would be this:

export const sudo = { run() { return import('./test3'); } }

export default sudo;

(正确地)编译成这样:

Which compiles (correctly) into this:

exports.sudo = { run: function () { return Promise.resolve().then(function () { return require('./test3'); }); } };
exports.default = exports.sudo;

这篇关于TypeScript ES动态`import()`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！