如何在打字稿中使用带有es6导入语法的节点模块

Question

我有一个打字稿项目，它使用了我们通常在前端运行的节点模块之一。我们现在希望在我们服务器上的节点中使用这个模块。

模块使用es6导入语法import { props } from 'module/file'

当我使用以下任一方法在 typescript 中包含 ref 时

import { props } from 'module/file';
var props = require('module/file');

我从打字稿中得到以下错误

unexpected token 'import' 
(function (exports, require, module, __filename, __dirname) { import

重写模块是一项艰巨的工作，我尝试过将 babel 与 babel-plugin-dynamic-import-node 以及 SystemJS 一起使用。

这些系统的问题是它们都是异步的，所以我不能以标准方式导入模块，所以当我们达到我能做到的程度时，我需要重新编写一大堆在 node.js 中本地使用 import。

我不是第一个遇到此问题的人，但我似乎找不到可行的解决方案。

------------- 更新设置 -------------

回应@DanielKhoroshko 的回复。我尝试导入的原始模块通常由 webpack 打包以便在前端使用。我现在尝试在服务器端和前端（通过前端的 webpack）使用相同的模块，而不重写 imports 以使用 require 并且不运行 webpack 将 js 捆绑到在服务器上使用。

需要明确的是，原始模块是用 JS 编写的，我们尝试使用该模块的服务是用 typescript 编写并转译的。当打字稿尝试require 使用import 的旧模块时，此时我们遇到了问题。

------------------ 一些进展 ----------------------------

通过在我的导入模块中创建一个文件，我取得了一些进展，该文件使用 node.js 中的 babel 将 es6 代码转换为 commonJS 模块。

我已经通过

var babel = require("babel-core")

var store = babel.transformFileSync(__dirname + '/store.js', {
    plugins: ["transform-es2015-modules-commonjs"]
});

module.exports = {
    store: store.code
}

我现在可以在我的新 node.js 项目中获得store。但是，store.js 文件中的子模块不包含在导出中。

所以在我的模块中，它说 import activities from './reducers/activities'; 我现在收到一个错误 Cannot find module './reducers/activities'

如何让 babel 进行深度遍历以包含子目录？

Answer 1

@Daniel Khoroshko 在很多方面都是正确的，我最终找到了@std/esm，它可以让您导入 es6 模块，并且还可以使用 find 来获取包含的导入。

var babel = require('babel-register')({
    presets: ["env"]
});

    require = require('@std/esm')(module);

    var store = require('ayvri-viewer/src/store');

    exports.default = {
        store: store
    }

我必须运行 babel 才能获得从 es6 到节点兼容 es5 的一致构建

Answer 2

unexpected token 'import' 表示您在不支持import/export 命令的环境中运行 es-modules 代码。如果您正在使用 TypeScript 编写代码，那么在为浏览器构建之前先对其进行转译或使用 ts-node 在服务器端运行它是很重要的。

如果你使用 webpack，有加载器 ts-loader 和 awesome-typescript-loader

你的设置是什么？

---

要描述模块，您需要在 js 版本（我理解它被称为 activities.js 和容器是减速器）所在的同一文件夹中创建一个 activities.d.ts 文件，其中包含以下内容（大约）：

import { Reducer } from 'redux';

export const activities: Reducer<any>;