如何导出/导入 es6 js 库答案

【问题标题】：How to export/import es6 js library如何导出/导入 es6 js 库
【发布时间】：2018-02-16 18:31:05
【问题描述】：

我正在创建一个 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>

总结一下：

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

感谢您的帮助。

【问题讨论】：

标签： javascript webpack es6-modules

【解决方案1】：

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

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

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

那你就可以了，

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

等等

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

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

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

那么你应该可以做到：

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

这里的重要部分是您将在 window 中公开您的 webpack entry point 正在导出的任何内容。

【讨论】：