如何导出/导入es6 js库

Question

我正在创建一个Es6 JS库，其中包含我通常在前端使用的常见任务，并且我对如何组织有一些疑问，以便可以按自己的方式导出/导入。 我以这种方式组织它：

src/
  module/
    function.js
    index.js // Module, exports grouped functions
  index.js // Enty point, exports entire library

src / index.js：

import module from './module/index';

const library = {
  module
};

export default library;

src / module / index.js：

import func from './function';

const module = {
  func
};

export default module;

src / module / function.js：

function func() {
  console.log('do things');
};

export default func;

我在库中访问这些方法没有问题，但是我不知道如何配置webpack使其能够从所需方式之外访问它们。 我希望能够做这样的事情：

// Use all methods 
import Library from 'library';

Library.module.func();

// Use only methods from module
import module from 'library/module';

module.func();

// Use only 1 function
import func from 'library/module/func';

func();

顺便说一句，如何访问库如果在构建库时仅添加由webpack创建的JS。 我的意思是，我可以做到吗？

<script src="library.js"></script>
<script>
    Library.module.func();
</script>

我尝试自己配置Webpack，但是没有运气。 库始终是{}，未定义，或者我必须使用Library.default。 其他时间不是全球性的。 我已经用Vue尝试过，这是结果：

<script src="library.js"></script>
<script>
    const a = Library.default;

    new Vue({
      el: '#app',
      data: {},
      methods: {
        buttonClick() {
          a.module.func(); // works
          Library.default.module.func(); // CRASH cause is undefined
        }
      },
      created() {
        Library.default.module.func(); // works ???
      }
    });
</script>

总结一下：

1. 我不知道如何正确配置webpack以便能够导入库，模块或单个功能。
2. 我什至不知道我组织图书馆的方式是否正确。

谢谢您的帮助。

Answer 1

我在库中访问这些方法没有问题，但是我不知道如何配置webpack使其能够从我想要的方式之外访问它们

您需要使用resolve.alias ，这将允许您从webpack配置处理的任何代码中以所需的方式使用库，例如​​：

alias: { 
  library: path.resolve(__dirname, 'src/')
}

那你就可以

import Library from 'library';
import Library from 'library/module/function';

等等

顺便说一句，如何访问库如果在构建库时仅添加由webpack创建的JS。 我的意思是，我可以做到吗？

您应该能够正确配置webpack输出以在window显示库。 看看output字段library和libraryTarget 。 基本上，您可以告诉webpack在根范围（窗口）中导出库：

output: {
   ...
   library: 'library',
   libraryTarget: 'var'
   ...
}

然后，您应该可以执行以下操作：

<script src="library.js"></script>
<script> library.module.func() <script>

这里重要的entry point是无论Webpack entry point正在导出，您都将在window对其进行公开。