1

requireモジュールは実行時ではなくコンパイル時にバンドルされるため、条件付きで browserifyを使用できないことはわかっています。条件付きでモジュールを削除するのはどうですか?

画像ギャラリーを作成できるアプリがあるとします。ギャラリーは編集することもできます (画像の並べ替えなど)。しかし、ギャラリーのレンダリングと編集は結合されており、完全に分離することはできません。しかし、ギャラリーを展開するために編集機能は必要なく、どのモジュールが使用されているかはわかっています。2 つの異なるバンドルを作成したいと考えています。1 つは編集機能を備え、もう 1 つはほとんどの編集コードを削除して編集機能を備えていません。私がしたことはenvify、uglify のデッド コードの削除を使用して、自分のコードを小さなバンドルから除外することです。

前 (thing.js)

//...some code that only the editor needs...
module.exports = thing;

後 (thing.js)

if(process.env.INCLUDE_EDITOR === 'yes') {
    //...some code that only the editor needs...
    module.exports = thing;
}

これはうまく機能し、エディター バンドルはすでに小さくなっています。そして、他のバンドルがその機能を使用することは決してないことを知っているので、thing何もエクスポートせず、空のモジュールを使用しても問題ありません。

ここで問題です。thing.jsたとえば、モジュールが必要な場合は、デッド コードの削除後に誰も使用していなくてもpicaバンドルされます。

前 (thing.js)

var pica = require('pica');
//...some code that uses pica...
module.exports = thing;

後 (thing.js)

if(process.env.INCLUDE_EDITOR === 'yes') {
    var pica = require('pica');
    //...some code that uses pica...
    module.exports = thing;
}

要約すると、私のバンドルにはpicaライブラリが含まれるようになりましたが、誰もそれを必要としません。それを必要とするコードはデッド コードでしたが、uglify は完全に削除できることを明らかに理解できませんpica。

4

2 に答える 2

1

あなたが求めているのは、のような変換だと思いますuglifyify。

Uglify には、バンドルに含まれる前に各ファイルに Uglify の「スクイーズ」変換を適用できるという利点があります。つまり、条件付きの require のデッド コード パスを削除できます。

uglifyjs結果の出力で実行したいことに注意してください。

于 2016-10-25T12:43:13.373 に答える
0

十分に機能するソリューションを見つけたと思います。おまけとして、既存のコードに触れる必要はありません (process.env.チェックを追加するなど)。requireモジュール/ファイルのリストを指定して、それらの呼び出しをに置き換える browserify 変換を作成しまし{}た。このようにして、結果のバンドルから完全に削除されます。とにかくただのハックです。知っている。

前：

var thing = require('./thing.js');
var pica = require('pica');

後：

var thing = {};
var pica = {};

https://www.npmjs.com/package/browserify-transform-toolsを使用すると、既にmakeRequireTransformヘルパーが提供されているため、これはほんの数行のコードでした。ここにコードをダンプします。自分が何をしているのかを正確に理解していない限り、誰も使用しないことをお勧めします。

derequire.js

var path = require('path');
var resolve = require('resolve');
var transformTools = require('browserify-transform-tools');

var options = {
    evaluateArguments: true,
    jsFilesOnly: true
};

var cache = {};
var resolveDerequire = function(moduleName) {
    var fromCache = cache[moduleName];

    if(fromCache) {
        return fromCache;
    }

    return require.resolve(moduleName);
};

var transform = transformTools.makeRequireTransform('derequire', options, function(args, transformOptions, done) {
    var requiredModule = args[0];
    var basedir = path.dirname(transformOptions.file);

    var shouldDerequire = transformOptions.config.modules.some(function(moduleToRequire) {
        try {
            //The normal require which respects NODE_PATH.
            return require.resolve(requiredModule) === resolveDerequire(moduleToRequire);
        } catch(ex1) {
            try {
                //A local require relative to the current file.
                return resolve.sync(requiredModule, {basedir: basedir}) === resolveDerequire(moduleToRequire);
            } catch(ex2) {
                console.error(ex1, ex2);
                return false;
            }
        }
    });

    if(shouldDerequire) {
        done(null, '{}');
    } else {
        done();
    }
});


module.exports = transform;

変換用の package.json 構成

"browserify": {
    "transform": [
        "babelify",
        [
            "./derequire.js",
            {
                "modules": [
                    "pica",
                    "exif-js",
                    "./src/thing.js",
                    "components/TextEditor.jsx",
                    "lib/FileUploader.js"
                ]
            }
        ],
        "browserify-css",
        "imgurify",
        "glslify"
    ]
},
于 2016-10-24T13:05:52.530 に答える