javascript - 如何区分 Webpack 中的私有(private)类和公共(public)类

Question

我正在使用 web pack 来打包库。我们有多个 ES6 类，以这种方式:

/src/Lib.js

import HelperClass from './HelperClass.js';
class Lib {
  method1() {...}
}

/src/HelperClass.js

class HelperClass {
  doSth() {...}
}

使用 webpack 进行打包，我们最终得到一个文件 lib.js，其中包含 Lib 和 HelperClass 作为 var Lib = ...。

如何使用 webpack 从全局命名空间中隐藏 HelperClass(例如，将其设为私有(private)类)？

更新:

现在我在导入 HelperClass 时遇到了问题!我上传了一个示例项目https://github.com/benmarten/webpack_es6_test

这一行:

__WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth();

结果:

[Error] TypeError: __WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth is not a function. (In '__WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth()', '__WEBPACK_IMPORTED_MODULE_0__Helper_js___default.a.doSth' is undefined)
method1 (lib.js:92)
Global Code (index.htm:6)

Answer 1

使用 webpack 创建库时，您会公开在入口点中导出的所有内容，其他所有内容都无法从外部访问，但您可以在代码中使用它。如果您想使用另一个文件中的任何内容，您仍然需要导出它，因为这些文件仍然是模块。仅仅因为有导出，并不意味着它就成为全局性的。只有 webpack.config.js 中指定的条目中的导出才会被公开。

在 HelperClass.js 中导出助手:

class Helper {
  static doSth() {
    console.log('helper:doSth');
  }
}

export default Helper;

然后将其导入到Lib.js中:

import Helper from './HelperClass.js';

class Lib {
  static method1() {
    Helper.doSth();
  }
}

export default Lib;

现在，您的包的默认导出将是 Lib 类，您可以在其中使用 Helper 而无需公开它。

您还应该阅读Authoring Libraries Guides .