Question

Rangy作为核心库提供，rangy-core.js，以及一组内置在单独文件中的可选模块（例如rangy-serializer.js）。我试图找出将rangy-core加上我需要的模块作为单个文件捆绑的最佳方法。

背景

我正在创建一些加载到第三方网站的Javascript。我加载时做的第一件事就是拉下我的附加依赖项（jQuery，Ractive，Rangy）。我开始的网络请求数量是一个值得关注的问题，所以我想避免单独拉下每一块Rangy。

我尝试过的事情：

1）手动加载。目前，我插入脚本标记以拉下rangy-core.js，然后在加载时我插入标签以下拉其他模块。这有效，但会产生4个网络请求。像这样：

function loadRangy() {
    // loadScript inserts a script tag and then calls
    // back to a function when the script is loaded
    loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.min.js', function() {
        loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-classapplier.min.js');
        loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-textrange.min.js');
        loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-serializer.min.js');
    });

2）Browserify。我尝试过使用Browserify将这4个脚本合二为一。我可能做错了，但我尝试的只是：

browserify rangy-*.js -o rangy-combined.js

这会爆发：

Error: Cannot find module 'rangy' from '/Users/foo/bar/rangy/1.3.0'
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
at ondir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at Object.oncomplete (fs.js:107:15)

Answer 1

我不确定它是否是推荐/最好的方法，但我发现我可以简单地连接文件，一切似乎都有效（只要我放入rangy-core第一）。使用Grunt，它看起来像这样：

/*global module:false*/
module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        concat: {
            rangy: {
                src: [ '../rangy/1.3.0/uncompressed/rangy-core.js', '../rangy/1.3.0/uncompressed/*.js' ],
                dest: ‘../lib/rangy-combined.js’
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('rangy', [ 'concat:rangy' ]);

};

如何将Rangy与其他模块捆绑在一起？

1 个答案: