browserify 包中的多个节点模块答案

【问题标题】：Multiple node modules in a browserify bundlebrowserify 包中的多个节点模块
【发布时间】：2014-03-01 10:51:22
【问题描述】：

我正在开发一个使用不同依赖项（例如页面、超级代理、vue）的客户端项目。为了优化我的 grunt-browserify 任务速度，我想在一个文件中创建一个包含所有这些依赖项的包，例如 lib.js。我的源代码将在 app.js 中编译。然后我想我将不得不将两者都连接到我的 build.js 中。使用此设置，grunt 只需更新 app.js 和 build.js)，而不需要更新 lib.js。这也意味着对于 lib.js 中包含的每个依赖项，我仍然可以 require(dep)。

我已经阅读了一些关于它的资料，但我无法让它发挥作用。

我当前的 browserify 任务是：

browserify: {
        dev: {
            files: {
                'build/app.js': ['src/**/*.js', 'src/**/*.html']
            },
            options: {
                debug: true,
                external: ['vue', 'superagent', 'page']
            }
        }
    }

我尝试添加类似的内容但没有成功：

browserify: { // the dev target is still there
        lib: {
            files: {
                'build/lib.js': ['vue', 'superagent', 'page']
            }
        }
    }

我知道它不起作用，因为我的文件对象不正确，但是我不知道如何自动获取每个依赖项的主文件。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： gruntjs browserify

【解决方案1】：

我终于想出了如何为 bower 组件执行此操作（尚未针对 npm 模块进行测试）。

首先，libs browserify 任务（以 TweenMax 为例）：

libs: {
    files: {
        'build/public/libs.js': ['bower_components/greensock/src/minified/TweenMax.min.js']
    },
    options: {
        shim: {
            TweenMax: {
                path: 'bower_components/greensock/src/minified/TweenMax.min.js',
                exports: 'TweenMax'
            }
        }
    }
}

然后是应用任务：

dev: {
    files: {
        'build/public/desktop/desktop.js': ['src/desktop/**/*.js']
    },
    options: {
        external: ['TweenMax']
    }
}

为每个库制作垫片或别名很重要。当我第一次尝试制作外部包时，我使用了几个干扰外部事物的 browserify 转换（例如 debowerify/deglobalify）。

【讨论】：