2017-12-31 77 views
0

私は通常、フロントエンドで動作するノードモジュールの1つを使用するtypescriptプロジェクトを持っています。私たちは今、サーバー上のノードでこのモジュールを使用しようとしています。私が使用してtypescriptですのRefを含む場合typescriptでes6インポート構文を持つノードモジュールの使用方法

モジュールはES6輸入構文import { props } from 'module/file'

を使用して、次のいずれかの方法

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

私はそれだ

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

typescriptですから、次のエラーを取得しますモジュールを書き直す大きな仕事であり、私はbabel-plugin-dynamic-import-nodeとSystemJSを使ってbabelを使ってみました。

これらのシステムの問題点は、すべて非同期であるため、標準的な方法でモジュールをインポートすることができないことです。したがって、私がポイントに達すると、私は一気に書き直す必要があります。 node.jsにネイティブインポートを使用できます

私はこの問題を抱える最初の人になることはできませんが、実際の解決策を見つけることができません。

---------------セットアップで更新------------- @ DanielKhoroshkoの応答に応じて

。私がインポートしようとしている元のモジュールは通常、フロントエンドで使用するためにwebpackによってパッケージ化されています。私は今、requireを使用するようにimportsを書き換えずに、サーバー上で使用するjsをバンドルするためにwebpackを実行せずに、サーバー側とフロントエンド(フロントエンド上のwebpack経由)の両方で同じモジュールを使用しようとしています。 。

当然のことながら、元のモジュールはJSで書かれています。このモジュールを使用しようとしている私たちのサービスは、typescriptで書かれています。タイスクリプトがを使用する古いモジュールrequireにしようとすると、この時点で問題が発生しています。

------------------いくつかの進捗状況-------------------------- -

私はimportモジュールでnode.jsのbabelを使用してes6コードをcommonJSモジュールに変換するファイルを作成していくつかの進歩を遂げました。

私は今、私の新しいNode.jsのプロジェクトでstoreを得ることができます

var babel = require("babel-core") 

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

module.exports = { 
    store: store.code 
} 

を経由して、これをやりました。ただし、store.jsファイル内のサブモジュールはエクスポートに含まれません。

だからここで私のモジュールでは、それは import activities from './reducers/activities'; 言う私は今、エラー Cannot find module './reducers/activities'

は、どのように私はバベルのサブディレクトリが含まれるように、深いトラバーサルを行うために取得することができますか?

+0

ノードするES6から一貫したビルドを取得するにはバベルを実行する必要がありました - フォーマットcjs'。あるいは、SystemJSを使用してサーバーサイドアプリケーションをロードすることもできます。 –

+0

@AluanHaddadありがとう、私はSystemJSの一部として '--format cjs'を見たことはありませんでした。私がSystemJSで経験している問題は、必要なモジュールが約束として返され、サーバ側とクライアント側の両方に利用可能なモジュールの記述方法に影響があることです。 – pedalpete

答えて

1

@Daniel Khoroshkoは、右の多くの点で、私はあなたがES6モジュールをインポートし、同様に含ま輸入をフェッチするために見つけることができます働い@std/esmを見つけてしまいました。

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

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

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

    exports.default = { 
     store: store 
    } 

は、私はあなたが `使用してサーバ側のための別のバンドルを作成することができ、あなたはクライアント側がSystemJSのために設定バンドリングしている場合の互換性ES5

1

unexpected token 'import'は、import/exportコマンドをサポートしていない環境でes-modulesコードを実行していることを意味します。 TypeScriptでコードを書いているのであれば、ブラウザ用にビルドする前にまず翻訳しておくか、ts-nodeを使ってサーバー側で実行することが重要です。

あなたはWebPACKのを使用している場合ローダーts-loaderawesome-typescript-loader

がある、あなたのセットアップは何ですか?


JS-バージョンは(私はそれがactivities.jsとコンテナ減速と呼ばれて理解)どこが同じフォルダにactivities.d.tsファイルを作成する必要がありますモジュールを記述するためには、次のように存在する(約):

import { Reducer } from 'redux'; 

export const activities: Reducer<any>; 
+0

@Danielに感謝、私は詳細で質問を更新しました。私たちが含んでいるモジュールはJSで書かれています、必要なコードはTSで書かれています。元のモジュールはwebpackでパッケージ化されていますが、これをサーバー上で使用しようとしていますので、webpackでパッケージ化したくないので、パッケージを直接使用する方法を見つけようとしています。 – pedalpete

+1

こんにちは!それはあなたが来た面白い解決策です。エラー: 'モジュールが見つかりません '/ reducers/activities''はtypescriptまたはnodeによって生成されますか?おそらく最初のものです。なぜなら、typescriptは、インポートされたモジュールの型が存在しないときに、importingを '理解しません '。この場合、私は通常、ノードスタイルを書くか、入力を書くだけです。これはindex.d.tsを作成することです(今答えを更新します) –

+0

助けてくれてありがとうDaniel、私は少し違った方向に行きましたあなたの提案された解決策は、他の人にとってはうまくいくかもしれませんが、含まれているモジュールのさまざまなものをアップデートするウサギのビット全体で終わってしまいました。私は私のソリューションを投稿します。 – pedalpete

関連する問題