導入其他打字稿模塊

我正在嘗試從打印節點模塊中的打字稿文件導入。這個文件是不是transpiled並使用打字稿語法：導入其他打字稿模塊

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註冊的模塊。

當嘗試編譯，我得到：

../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}` }

這使，我相信，它沒有編譯TS文件，因爲當我刪除字符串類型，它成爲一個有效的ES6文件，它正確啓動。

在我tsconfig.json文件我有：

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

我在想，也許排除node_modules，除了包common-files，但不知道該怎麼做。有沒有一種很好的方法來實現我想要的？

來源

2017-08-02 Vincas Stonys

我假設這是一個自定義模塊？模塊需要自己編譯併發布.js和.d.ts。你在這裏看到的問題確實是tsc沒有編譯這個文件（它怎麼知道把它放在哪裏），然後webpack（？）解決了由於某種原因導入到.ts文件... –

你如果您使用ts-node而不是節點，則可以包含ts文件而不進行轉譯。 – lilezek

旁白：你想要做的是非常規的。通常，節點項目會將已經轉換成JavaScript的模塊進行安裝。

就這麼說，這裏有一個適合你的設置和a demo on GitHub.由於你的用例非常規，解決方案很複雜。

目錄結構>請注意common-files目錄中的index.ts文件。它有兩個目的。首先，它會列出我們希望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包，那麼我們將在dependencies部分列出common-files。

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

tsconfig.json>打字稿配置有些複雜，因爲你的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

來源

2017-08-02 22:42:33

你說這是非常規的，也許有傳統的方法來實現我想要的？我想要兩個單獨的包共享一些代碼，因此我已將該代碼移動到npm包並在本地將它們導入到每個項目中。在使用其他軟件包時，npm軟件包沒有被轉發的問題。 –

@VincasStonys答案擱置了傳統方法。 –

我坐下來，走到你建議的步驟，但他們沒有任何區別，因爲我得到了同樣的錯誤。也許我的目錄結構在某種程度上是無效的，或者其他配置是干預的...如果你覺得自己有幫助，這裏是我的repo鏈接：https://github.com/vincaslt/language-exchange/tree/EnvFix with the fixes根據你的回答 –

@ShaunLuttin回答了這個問題的一般情況。我的問題是因爲我用typescript腳本使用create-react-app，並且他們的webpack配置不允許使用來自模塊的原始打字稿文件。我決定編譯所有的文件，並生成一個可以作爲模塊使用的版本。它工作正常，但是我確保在使用前端項目時不要包含僅在節點環境中工作的任何內容。

來源

2017-08-04 16:21:57

導入其他打字稿模塊

回答

相關問題