Browserify的自定义依赖项名称无效

时间:2016-09-08 18:00:48

标签: node.js browserify

我试图让browserify的自定义依赖项名称与内存流一起使用。我使用内存流的原因是因为此代码注定要在AWS Lambda中运行,该Lambad将接收多个“文件”作为输入,并且不会通过文件系统对lambda可用。

根据https://github.com/substack/node-browserify的文件,似乎应该可以这样做:

  

b.require(file,opts)

     

文件也可以是一个流,但你也应该使用opts.basedir,以便相对要求可以解析。

     

使用opts的expose属性指定自定义依赖项名称。 require('./ vendor / angular / angular.js',{expose:'angular'})启用require('angular')

代码:

const browserify = require('browserify')
const path = require('path')
const File = require('vinyl')

const jsIndex = new File({
    file: path.resolve('index.js'),
    contents: new Buffer('var two = require("./two")')})
const jsTwo  = new File({
    file: path.resolve('two.js'),
    contents: new Buffer('console.log("Hello from two.js")')})

browserify({
        entries: [ jsIndex ],
        require: [ jsTwo ],
        basedir: path.resolve('.')
    })
    .bundle((err, res) => {
        if (err) console.log(err.message)
    })
    .pipe(process.stdout)

错误:

Cannot find module './two' from '...'

编辑:

另一个人在node-browserify github页面上发布了类似的问题:https://github.com/substack/node-browserify/issues/1622

1 个答案:

答案 0 :(得分:1)

Browserify大量使用文件系统,因为它实现了自己的模块分辨率,使用与节点require相同的算法。要使Browserify使用内存中的源文件进行捆绑,一种解决方案就是对文件系统进行修补 - 以类似于mock-fs模块的方式进行测试。

但是,您真的只想对源文件执行此操作。 Browserify将其模块分辨率用于捆绑包中包含的其他文件,并且必须将这些文件添加到内存文件系统中将是繁琐的。修补的文件系统函数应检查涉及内存源文件的调用,相应地处理它们并转发对原始实现的其他调用。 (mock-fs执行类似的操作,因为它检测require内发生的文件系统调用,并将这些调用转发给原始实现。)

'use strict';

const fs = require('fs');
const path = require('path');
const toStream = require('string-to-stream');

// Create an object hash that contains the source file contents as strings,
// keyed using the resolved file names. The patched fs methods will look in
// this map for source files before falling back to the original
// implementations.

const files = {};
files[path.resolve('one.js')] =
    'console.log("Hello from one.js");' +
    'var two = require("./two");' +
    'exports.one = 1;';
files[path.resolve('two.js')] =
    'console.log("Hello from two.js");' +
    'exports.two = 2;';

// The three fs methods that need to be patched take a file name as the
// first parameter - so the patch mechanism is the same for all three.

function patch(method, replacement) {

    var original = fs[method];
    fs[method] = function (...args) {

        var name = path.resolve(args[0]);
        if (files[name]) {
            args[0] = name;
            return replacement.apply(null, args);
        } else {
            return original.apply(fs, args);
        }
    };
}

patch('createReadStream', function (name) {

    return toStream(files[name]);
});

patch('lstat', function (...args) {

    args[args.length - 1](null, {
        isDirectory: function () { return false; },
        isFile: function () { return true; },
        isSymbolicLink: function () { return false; }
    });
});

patch('stat', function (...args) {

    args[args.length - 1](null, {
        isDirectory: function () { return false; },
        isFile: function () { return true; }
    });
});

// With the fs module patched, browserify can be required and the bundle
// can be built.

const browserify = require('browserify');

browserify()
    .require(path.resolve('one.js'), { entry: true, expose: 'one' })
    .require(path.resolve('two.js'), { expose: 'two' })
    .bundle()
    .pipe(process.stdout);

requireexpose

在您的问题中,您提到了exposeone.jstwo.js模块使用require捆绑在一起,因此可以使用expose选项中指定的名称在浏览器中使用它们。如果这不是你想要的,你只需使用add,它们就是捆绑内部的模块。

<!doctype html>
<html>
<head>
    <title>so-39397429</title>
</head>
<body>
    <script src="./bundle.js"></script>
    <script>
        // At this point, the bundle will have loaded and the entry
        // point(s) will have been executed. Exposed modules can be
        // required in scripts, like this:
        console.log(require('one'));
        console.log(require('two'));
    </script>
</body>
</html>

在调查this tsify question时,我花了一些时间研究Browserify的requireexpose选项。这些选项有助于从软件包外部对模块的需求,但我完全不确定它们对软件包中的模块之间的需求有任何影响(这是您需要的)。此外,它们的实现有点令人困惑 - 尤其是this part,其中暴露的名称有时会有一个斜杠。

乙烯基流

在您的问题中,您使用了vinyl。但是,我无法使用vinyl作为读取流。虽然它确实实现了pipe,但它不是事件发射器,并且似乎没有实现on - 基于pre-Streams 2 API - 这是Browserify期望的createReadStream结果。