使用 Typescript 和模块别名开发的 Npm 库
Npm library developed with Typescript and module-alias
我正在使用 Typescript 作为编程语言开发一个 npm 库。为了舒适地开发它，我在 tsconfig.json 和 module-alias 中使用了 paths 选项，这样我就可以编写诸如 import * from '@/utils' 之类的导入。问题是这些路径在转译的 js 文件中也保持不变。这应该很好，因为 module-alias 应该适用于这些路径。问题是只有当我在本地使用它时它才会起作用，但是当我使用 npm 安装库并尝试 运行 它时，它会停止工作。我该如何解决这个问题？
注意：我发现了问题，如果我将 __moduleAliases 配置放在使用我的库的项目的 package.json 中，并使用我的库 dist 的路径，它就可以工作。还是不知道怎么解决这个问题。
我想我找到了解决办法，但还是不够完美。
To module-alias 我可以通过设置将 package.json 的路径作为参数传递，所以我只使用 moduleAlias(path.join(__dirname, '..', 'package.json')); 以“绝对”方式指定 package.json 我的库，即使它是由另一个用户安装在另一个项目模块别名中，也将使用我的库的 package.json。
还有两个问题：
- 首先，如果导入我的库的项目也使用模块别名，它将不再起作用，因为它将在我的库中而不是在我的项目中搜索别名。
- 第二个是如果我的项目使用typescript，遇到@就会报错。我认为解决这个问题的唯一方法是使用将“@”路径更改为 js 结果中的真实路径的东西
原来很容易解决。我最终使用 webpack 将所有 @aliased 路径更改为正常路径，这样这个问题就没有持续存在，并删除了 module-alias。我使用了这个 webpack 插件 https://www.npmjs.com/package/tsconfig-paths-webpack-plugin, while this other plugin could be used without webpack https://www.npmjs.com/package/tsconfig-paths
要查看使用 webpack 编译的库并使用此插件，您可以查看 https://github.com/euberdeveloper/euberlog
我正在使用 Typescript 作为编程语言开发一个 npm 库。为了舒适地开发它，我在 tsconfig.json 和 module-alias 中使用了 paths 选项，这样我就可以编写诸如 import * from '@/utils' 之类的导入。问题是这些路径在转译的 js 文件中也保持不变。这应该很好，因为 module-alias 应该适用于这些路径。问题是只有当我在本地使用它时它才会起作用，但是当我使用 npm 安装库并尝试 运行 它时，它会停止工作。我该如何解决这个问题？
注意：我发现了问题，如果我将 __moduleAliases 配置放在使用我的库的项目的 package.json 中，并使用我的库 dist 的路径，它就可以工作。还是不知道怎么解决这个问题。
我想我找到了解决办法，但还是不够完美。
To module-alias 我可以通过设置将 package.json 的路径作为参数传递，所以我只使用 moduleAlias(path.join(__dirname, '..', 'package.json')); 以“绝对”方式指定 package.json 我的库，即使它是由另一个用户安装在另一个项目模块别名中，也将使用我的库的 package.json。
还有两个问题：
- 首先，如果导入我的库的项目也使用模块别名，它将不再起作用，因为它将在我的库中而不是在我的项目中搜索别名。
- 第二个是如果我的项目使用typescript，遇到@就会报错。我认为解决这个问题的唯一方法是使用将“@”路径更改为 js 结果中的真实路径的东西
原来很容易解决。我最终使用 webpack 将所有 @aliased 路径更改为正常路径，这样这个问题就没有持续存在，并删除了 module-alias。我使用了这个 webpack 插件 https://www.npmjs.com/package/tsconfig-paths-webpack-plugin, while this other plugin could be used without webpack https://www.npmjs.com/package/tsconfig-paths
要查看使用 webpack 编译的库并使用此插件，您可以查看 https://github.com/euberdeveloper/euberlog