browserify包中的多个节点模块

Question

我正在使用不同的依赖项（例如page，superagent，vue）开发客户端项目。 为了优化我的grunt-browserify任务速度，我想在一个文件中创建一个包含所有这些依赖项的包，例如lib.js. 我的源码将在app.js中编译。 然后我想我必须将两者都连接到我的build.js中。 使用此设置，grunt只需要更新app.js和build.js），而不是lib.js. 这也意味着对于lib.js中包含的每个依赖项，我仍然需要（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']
            }
        }
    }

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

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

Answer 1

我终于想到了如何为凉亭组件做这件事（尚未针对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）。