文章/答案/技术大牛

发布

问如何导出/导入es6 js库
EN

Stack Overflow用户

提问于 2018-02-16 18:31:05

回答 1查看 1.5K关注 0票数 3

我正在创建一个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，使其能够导入库、模块或单个函数。
我甚至不知道我组织图书馆的方式是否正确。

谢谢你的帮助。

javascript

webpack

es6-modules

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-16 18:48:59

我在库中访问这些方法没有问题，但我不知道如何配置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>

这里最重要的部分是，你将在window上揭露你的webpack entry point出口的任何东西。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48832877

复制

相似问题

问如何导出/导入es6 js库
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何导出/导入es6 js库EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何导出/导入es6 js库
EN