如何让 typescript + webpack + vuejs 在我的 node_modules/older/lib/ 目录中查找包？答案

【问题标题】：How do I get typescript + webpack + vuejs to find packages in my node_modules/older/lib/ directory?如何让 typescript + webpack + vuejs 在我的 node_modules/older/lib/ 目录中查找包？
【发布时间】：2019-09-13 20:36:41
【问题描述】：

我正在尝试将旧的 typescript 项目转换为新的 vue.js 项目的库。较旧的软件包配置为使用tsconfig.json 输出到./lib/，package.json 包括我能想到的所有“这是我的库所在的位置”选项。 tsc 将旧包中的所有内容编译为lib/，npm link 用于将包连接在一起。

我的问题是，无论我尝试了什么，我似乎都无法从我的导入中删除 lib/ 段，例如 import { baz } from "older/common/thing" 而不是 import { baz } from "older/lib/common/thing"。我应该忍受它吗？或者我应该为更漂亮的导入做些什么？

package.json（部分）

{
    "main": "./lib/index.js",
    "module": "./lib/index.js",
    "types": "./lib/index.d.ts",
}

tsconfig.json

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "sourceMap": true,
    "typeRoots": [
      "typings",
      "node_modules/@types"
    ],
    "outDir": "./lib",
    "declaration": true
  },
  "include": [
    "app/source/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

【问题讨论】：

我不能告诉你怎么做，但我认为这是可能的。 import 被 typescript 和 webpack 使用，所以你应该告诉 typescript 和 webpack 如何解析这些模块。也许在某个地方有代码源/示例，它会更容易帮助你。

标签： typescript vue.js es6-modules

【解决方案1】：

在使用 es6 模块和基于 Typescript 的 JavaScript 构建系统时，似乎几乎不可能删除额外的 /lib/ 路径。一个 StackOverflow 的回答提到了一些关于该功能被 ECMA 标准明确拒绝的内容。相反，像lodash-es 这样的库会构建第二个输出，将所有内容放在包的根目录中，与package.json 和tsconfig.json 相邻。对我有用，因为无论如何我们可能需要为库和应用程序设置不同的构建设置。

我最后在./lib/ 中添加了第二个tsconfig.json 和package.json，并刚刚指示tsc 从../app/source/ 中提取源代码。新程序将npm link 指向库而不是应用程序的包名称。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./",
    "rootDir": "../app/source",
    "baseUrl": "./"
  },
  "include": [
    "../app/source/**/*"
  ],
}

【讨论】：