Question

我希望避免使用库文件混乱我的分发包，并在HTML中为它们使用单独的脚本标记。

一种方式就是这样......

m1.js

module.exports = "first module";

m2.js

module.exports = "second module";

CND-m1.js

var m1 =  "first module";

main.js

var m1 = this.m1 || require("./src/m1");
var m2 = require("./src/m2");

console.log(m1);
console.log(m2);

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>browserify test</title>
</head>
<body>
    <script type="text/javascript" src="src/cdn-m1.js"></script>
    <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

例如，cdn-m1.js可以是一个库。

我能让它发挥作用的唯一方法是在require语句中放置一个短路回退，并在我的构建中对文件进行标记。

package.json中的

  "scripts": {
    "build-ignore": "browserify ./main.js -i ./src/m1.js > ./dist/bundle.js",
    "build": "browserify ./main.js > ./dist/bundle.js"
  },

使用build-ignore脚本，m1模块在bundle中存根，使其更小（假设它是一个50k的行库）并且它回退到cdn服务版本。

bundle.js

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) {
    //    browserify creates a stub for "./src/m1"
    }, {}], 

    2: [function(require, module, exports) {
        var m1 = this.m1 || require("./src/m1");
        var m2 = require("./src/m2");

        console.log(m1);
        console.log(m2);
    }, {"./src/m1": 1, "./src/m2": 3}], 

    3: [function(require, module, exports) {
        module.exports = "second module";
    }, {}]

}, {}, [2]);

有没有更好的方法来实现这一目标？

Answer 1

答案是使用browserify-shim 为了解决这个问题，我使用假的lib文件（main-a.js）创建了一个稍微复杂的场景，其中包含两个子依赖项（m1.js和m2.js）并创建了应用程序（{ {1}}）依赖假的lib。

我将main-b.js转换为一个独立的捆绑包，它暴露了一个名为main-a.js的全局变量，并在index.html中使用了一个单独的脚本标记来加载它。

然后我使用browserify-shim构建了在节点中需要fakeLib的应用程序的同构版本，但在浏览器中使用了main-a.js。

使用此应用：

window.fakeLib

这不起作用：

/**
 * main-b.js
 */
require("./src/main-a").say();

但这样做：

  "browserify-shim": {
    "./src/main-a": "fakeLib"
  },

您必须使用此"browserify-shim": { "./src/main-a": "global:fakeLib" }, 我认为这可能是由于浏览器中的一个错误，因为它与browserify handbook

不一致

的index.html

global:

假图书馆......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>browserify test</title>
</head>
<body>
    <div style="white-space: pre;" id="output"></div>
    <script type="text/javascript" src="dist/main-a-lib-pretty.js"></script>
    <script type="text/javascript" src="dist/bundle-B.js"></script>
</body>
</html>

/**
 * m1.js
 */
exports.say = "first module";

/**
 * m2.js
 */
exports.say = "second module";

package.json for fake lib。这使得一个独立的包暴露了fakeLib

/**
 * main-a.js
 */
var m1 = require("./src/m1");
var m2 = require("./src/m2");

exports.say = function() {
    function op(t){
        this.document
            ? document.getElementById("output").textContent += t + "\n"
            : console.log(t);
    }
    op(m1.say);
    op(m2.say);
};

虚假应用

{
  "name": "browserify-nightmare",
  "version": "1.0.0",
  "main": "main-a.js",
  "dependencies": {
  },
  "devDependencies": {
    "browserify-shim": "^3.8.12"
  },
  "scripts": {
    "build-lib": "browserify ./main-a.js -s fakeLib > ../dist/main-a-lib-pretty.js",
    "build-lib-pretty": "browserify ./main-a.js -s fakeLib | js-beautify > ../dist/main-a-lib-pretty.js"
  },
  "author": "cool.blue",
  "license": "MIT",
  "description": ""
}

package.json，它使用browserify-shim在浏览器中从/** * main-b.js */ require("./src/main-a").say();返回fakeLib，但在节点中就像普通的CommonJS模块一样。

require("./src/main-a")

this answer非常有帮助

git repo

Answer 2

首先，您必须为m1.js：

创建单独的捆绑包

browserify -r ./src/m1.js > ./dist/m1_bundle.js

然后只需创建“普通”包并引用创建的m1_bundle.js：

browserify -x m1 -d ./main.js > ./dist/bundle.js

现在您必须将这两个包添加到HTML文件中。

注意：您必须在HTML中的“普通”m1_bundle.js之前添加bundle.js。

有关详细信息，请显示我的其他answer。在那里我解释，如何使用node_modules而不是自己的库来做同样的事情。

如何从browserify包中排除库文件

2 个答案: