如何在 TypeScript 中創建本地模塊

Question

我在文件夾src/modules/my-module/中創建了package.json並定義了導出我們需要的一切的主文件。

我現在可以從它import {A} from '../../modules/my-module'

我想將語法更改為import {A} from 'my-module'我有幾個原因：

• 當我將模塊移動到另一個文件夾時，我不想更改調用該模塊的所有代碼。
• 后來，我希望有可能將該模塊作為 npm 包移動到一個單獨的存儲庫，並在多個項目中重用它。 我不想稍后更改所有調用代碼。

我已經設法通過添加到tsconfig.json來編譯它

"paths": {
  "my-module": ["src/modules/my-module"]
}

但是我無法通過 node.js 運行結果，因為節點找不到模塊。 在這種情況下有沒有辦法使用非現實模塊引用。

Answer 1

將 ts 文件轉譯為 js 時，TS 不會轉換該“我的模塊”。

使用module-alias包可能會解決您的問題。

將下面的配置添加到 package.json 中：

"_moduleAliases": {
   "my-module": "<your_build_folder>/modules/my-module"
},

這段代碼位於主文件的第一行 (server.ts/index.ts)

import 'module-alias/register';

Answer 2

聽起來，你想要做的是打包你的本地my-module ，這樣它就可以像你安裝和使用來自 npm registry 的包一樣使用。

當您進行本地開發時，很容易配置一個依賴項以將您的模塊作為文件路徑引用——盡管您需要轉換您的打字稿才能使其在您的情況下工作。

這是我在本地開發中使用的方法，在我們有許多微服務架構實用程序模塊的環境中。 我將模塊打包到存檔中並使用npm install安裝它：

---

• 使用npm pack將模塊打包成.tgz 。 我們的package.json定義了要打包的目標目錄， build腳本執行到目標的轉譯（顯然根據您的需要進行調整）：

  ...
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "npx babel src --out-dir dist --extensions .ts,.tsx,.js --ignore **/*.test.ts,**/*.test.tsx",
  ...

• 運行npm pack並在您的應用程序中安裝生成的包

/my-module/> npm pack
/my-module/> cd ../my-app
/my-app/> npm install --save ../my-module/my-module-0.0.1.tgz

或者作為一個一體機（在my-app目錄中構建tgz ）：

/my-app/> && npm pack ../my-module && npm i -s my-module-0.0.1.tgz

---

完成開發后，您可能希望以可用於部署項目的方式發布模塊。

您的選擇是：

• 使用npm link發布到本地系統
• 發布到私有注冊表
• 發布到 npm 注冊表（作為公共或私有模塊）

這是這些選項的一個很好的資源： https ://medium.com/@debshish.pal/publish-a-npm-package-locally-for-testing-9a00015eb9fd

Answer 3

從 2018 年 7 月的 Typescript 3 開始，您可以轉譯您的外部本地項目（參考項目）。

請參閱： 如何在 TypeScript 項目之間共享代碼？

Answer 4

將本地模塊作為依賴項添加到package.json （在項目的根目錄中）：

  "dependencies": {
    "my-module": "file:src/modules/my-module",
    ...
  }

像這里@tsconfig/recommended配置你的打字稿設置

在您的根文件夾中運行npm install my-module

然后你可以這樣做：

import {A} from 'my-module'