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 /模块/ index.js：

import func from './function';

const module = {
  func
};

export default module;

的src /模块/ 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以便能够导入库，模块或单个功能。
我甚至不知道我组织图书馆的方式是否正确。

感谢您的帮助。

Answer 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正在导出的内容。

如何导出/导入es6 js库

1 个答案: