【问题标题】:Browserify: using external libraries from within bundleBrowserify:使用捆绑包中的外部库
【发布时间】:2015-06-23 12:29:14
【问题描述】:

我们的团队开发浏览器端javascript 应用程序。我们使用angularjs 作为框架和全局命名空间中的一些帮助库。例如:underscore

出于单元测试的原因,我们将一大段代码(输入/输出数据转换)放入一个独立的库中。

现在我尝试在这个库中使用browserify。问题是从捆绑共享(与主应用程序)依赖项(例如下划线)中排除的最佳方法是什么。 我试过2:

  1. 使用--external。我必须从下划线创建捆绑包并将其用于应用程序中的所有代码内容。如果我理解正确,这种方式似乎很不方便。
  2. 使用 package.json 中的browser 属性将下划线替换为存根:

    module.exports = _;

我相信有更干净的方法,但它在哪里?

【问题讨论】:

    标签: javascript bundle external browserify


    【解决方案1】:

    您不必使用--external 或类似的东西。只需像这样包含库:

    <script src="external/lib.js"></script>
    

    然后你可以在你的包中使用它(没有 require)。

    但是:在我看来,您不应该将全局库与 browserify 混合使用。 browserify 的所有好处都会以这种方式大幅减少。

    对比:

    • 要包含多个文件
    • 更差的可读性导致更少的 `require` 语句

    推荐:

    创建一个包含所有外部库的包并将它们安装为 npm 模块。

    npm install --save angular
    npm install --save lodash
    

    创建外部包:

    browserify -r angular -r lodash > external/libs.js
    

    您只需捆绑一次,因为它们永远不会改变。然后创建没有外部模块的主应用程序包:

    browserify --no-bundle-external app.js > bundle.js
    

    然后将这两个捆绑包包含到您的页面中:

    <script src="external/libs.js"></script>
    <script src="bundle.js"></script>
    

    【讨论】:

    • 问题是我必须使用require('./external/lib') 在节点环境中进行测试。
    • 我不知道是否可以将 Angular 与 commonjs 模块一起使用...它有自己的模块管理方法。出于这个原因,我想保持应用程序的其余部分不变。
    • 好的。注意:我经常听说将browserifycommonjs 模块一起使用时出现问题。抱歉,但我对此无能为力。
    • 在使用外部库时,我们是否必须从所有文件中删除 require?
    • 是的。当您将库直接包含在您的 html 文件中时(并且不要使用诸如 browserify 之类的东西来捆绑/限定您的代码),您将删除需要声明的漏洞,var lib = require("external/lib.js");。该库应该可以在全局空间中访问。你只需要使用它。
    猜你喜欢
    • 2015-06-13
    • 2017-12-21
    • 2015-07-28
    • 1970-01-01
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    • 1970-01-01
    • 2017-09-13
    相关资源
    最近更新 更多