如何使用browserify捆绑多个javascript库？

2019-10-08 17:39:32 阅读：263 来源： 互联网

标签：javascript node-js browserify npm gruntjs

我正在尝试在浏览器中使用Browerifiy,如果我使用独立选项它会暴露一个模块.我不想这样做.
网站和文档似乎在我实际编译代码的任何地方都被切断了.
没有人说过如何在浏览器属性中实际使用代码.

我有一个笨拙的任务：

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-components/**/*.js' ],
        dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
        /* Commented out, zero documentation on this. Can only expose one module it seems.
        options: {
          browserifyOptions: {
            standalone: 'Utility' //Unable to say '**/*' error :-/
          }
        }
        */
      },

这似乎工作,它使这样的文件：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var UrlController = function(){};

UrlController.test = function () {
    return 'test';
};

module.exports = UrlController;

},{}],2:[function(require,module,exports){
'use strict';

var Utility = function(){};

Utility.isASCII = function (str) {
    return /^[\x00-\xFF]*$/.test(str);
};

Utility.isAlphaNumeric = function(str) {
    var code, i, len;
    for (i = 0, len = str.length; i < len; i++) {
        code = str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code > 96 && code < 123)) { // lower alpha (a-z)
            return false;
        }
    }
    return true;
};

module.exports = Utility;

},{}]},{},[1,2]);

我使用注入器自动包含它,该注入器类似于：

<script src="app/js/browserifed-shared-code.js"></script>

现在我希望我能打电话

require('Utility');

但我明白了

Uncaught ReferenceError: require is not defined(…)

我不知道/无法在浏览器中加载这些模块. ：’ – /

解决方法:

你有两个选择.不管你

解决方案1

为要在浏览器中访问的每个库创建独立的browserify模块.这已在您的其他帖子中得到解答.基本上你做了多个browserify捆绑.

browserify library1.js --standalone Library1 -o library1-bundle.js
browserify library2.js --standalone Library2 -o library2-bundle.js
browserify library3.js --standalone Library3 -o library3-bundle.js

 <script src="library1-bundle.js" type="text/javascript"/> 
 <script src="library2-bundle.js" type="text/javascript"/> 
 <script src="library3-bundle.js" type="text/javascript"/>

所以,在您的构建工具中,您将拥有

browserify: {
      library1 : {
        src: [ '<%= yeoman.server %>/shared-components/library1.js' ],
        dest: '<%= yeoman.client %>/app/js/library1-bundled.js',
        bundleOptions : { standalone : 'Library1' }
      },
      library2 : {
        src: [ '<%= yeoman.server %>/shared-components/library2.js' ],
        dest: '<%= yeoman.client %>/app/js/library2-bundled.js',
        bundleOptions : { standalone : 'Library2' }
      },
      library3 : {
        src: [ '<%= yeoman.server %>/shared-components/library3.js' ],
        dest: '<%= yeoman.client %>/app/js/library3-bundled.js',
        bundleOptions : { standalone : 'Library3' }
      }
}

解决方案2

或者,为所有模块创建一个主入口点.

// ---- main.js -----
module.exports.Library1 = require('./lib1');
module.exports.Library2 = require('./lib2');
module.exports.Library3 = require('./lib3');

然后,您使用browserify

browserify main.js --standalone Library -o bundle.js

然后在浏览器中

<script src="bundle.js" type="text/javascript"/>

在你的艰巨任务中：

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-components/main.js' ],
        dest: '<%= yeoman.client %>/app/js/main-bundled.js',
        bundleOptions : { standalone : 'Library' }
      }}

关于模块加载器和Browserify的注意事项

然后,为了扩展我在上一篇文章中所做的答案,browserify以不同的方式公开它的捆绑模块,具体取决于您环境中的模块管理器.

>如果你在节点中,那就是commonJS(同步),所以你可以使用require(”);
>如果您使用的是AMD(异步),则可以使用该AMD语法.
>如果您在浏览器中,您可以使用任一窗口.或全球的.

Grunt动态任务定义

要稍微自动化,您还可以传递配置：

bundledLibraries : [
    Library1 : {
        src : './../src/lib1.js',
        dest : './../src/lib1-bundled.js'
    },
    Library2 ...
]

然后你迭代将它们添加到grunt配置(

查看本文以动态创建它们http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html

标签：javascript,node-js,browserify,npm,gruntjs
来源： https://codeday.me/bug/20191008/1873235.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何使用browserify捆绑多个javascript库？