Question

我创建了一个NPM软件包，该软件包使用Webpack和Babel进行转码/捆绑。

在我的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;

Answer 1

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

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


export default class myPackage {
      helper1,
      helper2,
};

OR

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


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

我希望这会有所帮助。

Answer 2

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

export {
  helper1,
  helper2,
};

最近，我发现我们可以使用Object.freeze()进行导出。这是一个不错的article。

NPM软件包：最佳做法并公开了多个导入路径

2 个答案: