導入當前 package 按 package.json 名稱導出

Question

我很想知道是否有一種約定允許人們從 package 中測試 package 的預期用法。考慮以下 package.json：

{
   "name": "@place/fn",
   "version: "1.0.0"
}

從這個 package中，我想要一個test.js文件，其中包含以下代碼：

import mainThing, { anotherThing } from '@place/fn';

使用正確的目錄結構或 package.json 配置是否可能？ 如果 CommonJS 語法效果更好的話，我也很滿意。

Answer 1

好的，找到了一個答案，但我在這個過程中發現了很多其他相關的東西，可能會幫助其他人。

首先，現在我明白我想要做的是將當前包安裝為本地依賴項。 這可以使用在此答案中找到的以下語法在package.json完成。

{
  "name": "@place/fn",
  "dependencies": {
    "@place/fn": "file:./"
  }
}

現在，我可以運行npm i來安裝該更改並編寫以下測試文件：

import mainThing, { anotherThing } from '@place/fn';

運行測試文件時，導入的行為就像是安裝到另一個包中一樣； 更好地模仿預期用途。

---

我發現的另一件事是，您可以使用此答案中找到的語法為從 npm 安裝的包設置別名。

"dependencies": {
  "case-1.5.3": "npm:case@^1.5.3",
  "kool": "npm:case@^1.6.1"
}

然后允許您執行以下操作：

let Case = require('case-1.5.3');
let Kool = require('kool');

---

最后，我發現的另一件事是Node@13 允許在package.json上使用一個新鍵來映射在這個答案中找到的目錄。 還有其他包（如module-alias ）做類似的事情，最大的區別是安裝的解決方案（即： module-alias ）只能在您正在使用的包內工作。 似乎package.json上的新exports鍵將進行映射以在其他包中使用。

// ./node_modules/es-module-package/package.json
{
  "name": "es-module-package",
  "exports": {
    "./my/": "./src/js/lib/my/"
  }
}

import thing from 'es-module-package/my/thing.js';
// Loads ./node_modules/es-module-package/src/js/lib/my/thing.js

---

所有這一切的最終目的是測試我在包外提供的語法風格是否可以從包內進行測試，而不是安裝到另一個包中並在那里進行測試。 現在我可以檢查一個通用的 lodash 導入語法是否適用於我的包。

import get from 'lodash/get'

（我希望我知道需要一個干凈的，也許是別名的包路徑而不是破壞主導出的術語是什么。）

Answer 2

要從 package 本身訪問 package 的主要出口，請將主要入口點出口添加到package.json ：

{
  "name": "@place/fn",
  "version: "1.0.0",
  "exports": {
    ".": "./index.js"
  }
}

將./index.js替換為主模塊的路徑。

然后，在test.js中，您可以使用預期的語法導入它：

import mainThing, { anotherThing } from '@place/fn';

請注意，定義exports字段時，除非在exports中明確聲明，否則 package 的所有子路徑都不再對外部導入器可用。 通常，您至少希望package.json可以在主模塊旁邊導出：

  "exports": {
    ".": "./index.js",
    "./package.json": "./package.json"
  }

Answer 3

當你導入一個包時，由 package.json 文件來告訴你去哪里......假設你有以下文件結構

project
    demo
        demo-index.js
    dist
        project.cjs.js
        project.es.js
        project.umd.js
    src
        index.js
    package.json

您想在src對您的包進行編碼，構建它（使用 Vite 或 Bili 之類的東西），然后在您的demo文件夾中，查看構建的文件（在dist ）是否按預期工作。

所以你的 package.json 應該有：

{
    "name": "project",
    "version": "1.0.0",
    "main": "dist/project.cjs.js",
    "module": "dist/project.es.js",
    ...
}

現在，在demo/demo-index.js您可以從../src/index.js導入並使用未編譯的版本。

您還可以做的是從您的項目根目錄導入並獲取編譯版本：

// demo/demo-index.js
import Project from "../";

這將通過package.json文件導入並為您提供“模塊”下列出的文件，即dist/project.es.js 。