[英]how to use node module with es6 import syntax in typescript
I have a typescript project which has uses one of our node modules which normally runs in our front-end. 我有一个打字稿项目,该项目使用了通常在前端运行的节点模块之一。 We are now looking to use this module in node on our server.
我们现在正在寻找在服务器上的节点中使用此模块。
The module uses es6 import syntax import { props } from 'module/file'
该模块使用es6 import语法import'props
import { props } from 'module/file'
from'module import { props } from 'module/file'
When I include a ref in typescript using either of the following methods 当我使用以下两种方法之一在Typescript中包含ref时
import { props } from 'module/file';
var props = require('module/file');
I get the following error from typescript 我从打字稿中收到以下错误
unexpected token 'import'
(function (exports, require, module, __filename, __dirname) { import
It's a big job to re-write the module, and I've tried using babel with babel-plugin-dynamic-import-node, as well as SystemJS. 重写模块是一项艰巨的工作,我尝试将babel与babel-plugin-dynamic-import-node以及SystemJS结合使用。
The problem with these systems is that they are all asynchronous, so I can't import the module in the standard fashion, so I would need to do a whole bunch of re-write when we get to the point that I can use import natively in node.js. 这些系统的问题在于它们都是异步的,因此我无法以标准方式导入模块,因此当我们可以直接使用导入时,我将需要进行大量重写在node.js中。
I can't be the first person to have this issue, but I can't seem to find a working solution. 我不是第一个遇到此问题的人,但似乎找不到有效的解决方案。
--------------- update with set-up ------------- ---------------通过设置进行更新-------------
In response to @DanielKhoroshko's response. 回应@DanielKhoroshko的回应。 The original module I am trying to import is normally packaged by webpack in order to use on the front-end.
我尝试导入的原始模块通常由webpack打包,以便在前端使用。 I am now trying to use this same module both server-side and in the front-end (via webpack on the front-end) without re-writing the
imports
to use require
and without running webpack to bundle the js to use on the server. 我现在正在尝试在服务器端和前端(通过前端的webpack)使用相同的模块,而无需重新编写要使用
require
的imports
,也没有运行webpack来捆绑要在服务器上使用的js。 。
To be clear, the original module is written in JS, our service which is trying to use this module is written in typescript and transpiled. 为了清楚起见,原始模块是用JS编写的,我们试图使用该模块的服务是用打字稿编写的,并进行了编译。 When the typescript tries to
require
the old module which uses import
, it is at this point that we are running into the issue. 当打字稿试图
require
使用import
的旧模块时,我们就遇到了这个问题。
------------------ some progress --------------------------- ------------------一些进展---------------------------
I've made some progress by creating a file in my imported module which uses babel in node.js to transpile the es6 code into commonJS modules. 通过在导入的模块中创建一个文件,该文件取得了一些进展,该文件使用node.js中的babel将es6代码转换为commonJS模块。
I've done this via 我已经通过
var babel = require("babel-core")
var store = babel.transformFileSync(__dirname + '/store.js', {
plugins: ["transform-es2015-modules-commonjs"]
});
module.exports = {
store: store.code
}
I can now get the store
in my new node.js project. 现在,可以在新的node.js项目中获取
store
。 However, the submodules within the store.js
file are not included in the export. 但是,
store.js
文件中的子模块不包括在导出中。
So where in my module, it says import activities from './reducers/activities';
因此,在我的模块中,它表示
import activities from './reducers/activities';
I now get an error Cannot find module './reducers/activities'
我现在收到一个错误,
Cannot find module './reducers/activities'
How can I get babel to do a deep traversal to include the sub-directories? 如何让babel进行深度遍历以包含子目录?
unexpected token 'import'
means you are running es-modules code in environment that doesn't support import/export
commands. unexpected token 'import'
意味着您正在不支持import/export
命令的环境中运行es-modules代码。 If you are writing you code in TypeScript it's important to transpile it first before building for the browser or use ts-node
to run it server-side. 如果您使用TypeScript编写代码,那么在为浏览器构建代码之前首先进行编译或使用
ts-node
在服务器端运行它很重要。
If you are using webpack there are loaders ts-loader
and awesome-typescript-loader
如果您使用的是webpack,则有加载器
ts-loader
和awesome-typescript-loader
What is your setup? 你的设置是什么?
To describe the module you would need to create an activities.d.ts
file in the same folder where the js-version (I understood it is called activities.js
and containers a reducer) resides with the following (approx.): 为了描述该模块,您需要在js版本所在的同一文件夹中创建一个
activities.d.ts
文件(我将其称为activities.js
和一个reducer的容器),并将其放置在以下文件夹中(大约):
import { Reducer } from 'redux';
export const activities: Reducer<any>;
@Daniel Khoroshko was right in many ways, I ended up finding @std/esm
which lets you import es6 modules and worked find for fetching the included imports as well. @Daniel Khoroshko在许多方面都是正确的,我最终找到了
@std/esm
,它使您可以导入es6模块,并可以找到包含的导入内容。
var babel = require('babel-register')({
presets: ["env"]
});
require = require('@std/esm')(module);
var store = require('ayvri-viewer/src/store');
exports.default = {
store: store
}
I had to run babel to get a consistent build from es6 to node compatible es5 我必须运行babel才能从es6到兼容节点es5的构建保持一致
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.