NPM 包：最佳实践和公开多个导入路径

Posted 2023-03-08

【中文标题】NPM 包：最佳实践和公开多个导入路径

【英文标题】：NPM package: best practices and exposing multiple import paths

【发布时间】：2019-07-09 20:11:45

【问题描述】：

我创建了一个使用 Webpack 和 Babel 进行转译/捆绑的 NPM 包。

在我的package.json 中，我的主要设置为"main": "build/index.js"。在我的 Webpack 配置中，我将条目设置为 entry: app: './src/index.js' 。我的入口文件如下所示。

安装包后一切正常。但是，通过此设置，每个帮助程序都会公开两个导入路径：

这对于支持自动导入的编辑器来说是个问题，因为它们有时会从'my-package/build/utils/helper1' 而不是'my-package' 的首选路径自动导入。

那么，两个问题：

有什么方法可以防止更长的导入路径被暴露？ 创建 NPM 包时的最佳实践是什么。我的设置是否可以接受，还是我应该做一些不同的事情？

条目文件：

import helper1 from './utils/helper1';
import helper2 from './utils/helper2';

export 
  helper1,
  helper2,
;

const myPackage = 
  helper1,
  helper2,
;

export default myPackage;

【参考方案1】：

您可以使用Webpack resolve 我经常使用第一种方式：

export 
  helper1,
  helper2,
;

最近发现可以使用Object.freeze()导出。这是一个很好的article。

【参考方案2】：

我建议可能将您的helper1 和helper2 合并到一个文件中并将其命名为helpers，然后您可以将它们放在class myPackage 中，这样您就可以将它们导出为这样的模块

import myPackage from './utils/helper';
// OR import helper1, helper2 from './utils/helpers';


export default class myPackage 
      helper1,
      helper2,
;

或

import myPackage from './utils/helpers';    
// OR import helper1, helper2 from './utils/helpers';


module.exports.myPackage = (helper1, helper2) => 
  this.helper1 = helper1;
  this.helper2 = helper2;
;

我希望这会有所帮助。