他のタイプスクリプトモジュールのインポート

Question

node_modulesにあるtypescriptファイルからインポートしようとしています。そのファイルはtranspiledとtypescriptです構文を使用していません。

user.ts:

export const getUserFromToken = (token: string) => { 
    return axios.get('/user', { 
    headers: { authorization: `Bearer ${token}` } 
    }).then(({ data }) => data) 
} 

私はこのようにインポートしています：import { getUserFromToken } from 'common-files/api/user'、およびcommon-filesはpackage.jsonに登録モジュールです。

コンパイルしようとすると、私が手：

私はそれを、私は文字列型を削除すると、それが有効なES6ファイルとなりますので、それは、TSファイルをコンパイルしていないことを、信じている、とし、リード

../commons/api/user.ts 
Module parse failed: C:\Users\xxxx\Desktop\xxxx\commons\api\user.ts 
Unexpected token (9:38) 
You may need an appropriate loader to handle this file type. 
| export const getUserFromToken = (token: string) => { 
| return axios.get('/user', { 
|  headers: { authorization: `Bearer ${token}` } 

正しく始まります。

"exclude": [ 
    "node_modules", 
    "build", 
    "scripts", 
    "acceptance-tests", 
    "webpack", 
    "jest", 
    "src/setupTests.ts" 
] 

私はそのパッケージcommon-files除いて、多分node_modulesを除外するために、考えていたが、それを行う方法がわからない：私は私のtsconfig.jsonファイルで

。私が欲しいものを達成する良い方法はありますか？

Answer 1

は別に：何をしようとするは型破りです。通常、ノードプロジェクトは、既にJavaScriptに変換されたモジュールをインストールします。

ここでは、あなたのために働く設定があります。a demo on GitHub.使い慣れていないユースケースなので、解決策は複雑です。

ディレクトリ構造index.tsファイルがcommon-filesディレクトリにあることに注意してください。それは2つの目的を持っています。最初に、TypeScriptが必要とするファイルを一覧表示します。次に、一度変換されると、index.jsファイルは、common-filesフォルダがモジュールであることをノードに通知します。 The Node documentation on Folders as Modulesは、Nodeがどのようにモジュールを解決するかを説明します。

node_modules  
    common-files 
    api 
     user.ts 
    index.ts  <---- This file has two primary purposes. 
index.ts   
package.json  
tsconfig.json 

node_modules /共通ファイル/ API/user.ts>このファイルには、私たちはあなたのアプリケーションで使用する宣言が含まれています。

export const getUserFromToken = (token: string) => { 
    console.log("Getting the user for token " + token); 
} 

node_modules /共通ファイル/ index.ts> NodeJSのデフォルトによると、このindex.tsファイルはcommon-filesモジュールのメインファイルです。前述したように、メインファイルは、私たちが翻訳したい宣言のそれぞれをインポートします。

import "./api/user"; 

index.ts>このファイルには、あなたが構築しているアプリケーションを表します。 common-filesモジュールがエクスポートする切り抜き宣言のいずれかをインポートできます。

import { getUserFromToken } from "common-files/api/user"; 

getUserFromToken("some-token"); 

package.json>は、アプリケーションのノードパッケージファイル内の特別な何もないことに注意してください。つまり、npm installを使用してcommon-filesパッケージをインストールした場合、common-filesはdependenciesセクションに記載されています。 tsconfig.json

{ 
    "dependencies": { }, 
    "devDependencies": { 
    "typescript": "^2.4.2" 
    } 
} 

>あなたcommon-filesモジュールがtranspiledする必要があるため活字体の構成は、やや複雑であり、我々は他のすべての内部node_modulesを除外したいです。 tsconfig documentationには、ファイル、インクルード、およびエクスクルードの相互作用に関する詳細があります。

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs" 
    }, 
    "files": [ 
    "node_modules/common-files/index.ts" 
    ], 
    "include": [ 
    "**/*.ts" 
    ], 
    "exclude": [ 
    "node_modules" 
    ] 
} 

上記の設定のためのコンソール出力は次のようになります。

> .\node_modules\.bin\tsc 
> node index.js 
Getting the user for token some-token 

Answer 2

@ShaunLuttinは、一般的なケースのための質問に答えました。私の問題は、typescriptスクリプトを使用してcreate-react-appを使用したためで、webpackの設定ではモジュールから生のスクリプトスクリプトファイルを使用できないためでした。私はすべてのファイルを切り抜き、モジュールとして使用できるビルドを生成することに決めました。しかし、フロントエンドのプロジェクトでは、ノード環境でしか動作しないものは含めないようにしました。