Как я могу исключить путь кода при связывании с webpack/браузером?

У меня есть библиотека, которая может использоваться как с node.js, так и с браузером. Я использую CommonJS, а затем публикую для веб-версии с помощью webpack. Мой код выглядит следующим образом:

// For browsers use XHR adapter
if (typeof window !== 'undefined') {
  // This adapter uses browser XMLHttpRequest
  require('./adapters/xhr');
}
// For node use HTTP adapter
else if (typeof process !== 'undefined') {
  // This adapter uses node `http`
  require('./adapters/http');
}

Проблема, с которой я сталкиваюсь, заключается в том, что при запуске webpack (браузер будет делать то же самое) сгенерированный вывод включает http вместе со всеми его зависимостями. Это приводит к созданию файла HUGE, который не является оптимальным для производительности браузера.

Мой вопрос в том, как я могу исключить путь кода node при запуске модуля? Я решил это временно, используя внешние ресурсы webpack и возвращая undefined при включении './adapters/http'. Это не решает случай использования, когда другие разработчики зависят от моей библиотеки, используя CommonJS. Их сборка закончится той же проблемой, если они не используют аналогичную конфигурацию исключений.

Я посмотрел на использование envify, просто интересно, есть ли другое/лучшее решение.

Спасибо!

Ответ 1

Вы можете использовать IgnorePlugin для Webpack. Если вы используете файл webpack.config.js, используйте его следующим образом:

var webpack = require('webpack')

var ignore = new webpack.IgnorePlugin(/^(canvas|mongoose|react)$/)

module.exports = {
  //other options goes here
  plugins: [ignore]
}

Чтобы продвинуть его дальше, вы можете использовать некоторые флаги, такие как process.env.NODE_ENV для управления фильтром регулярных выражений IgnorePlugin

Ответ 2

Чтобы исключить из библиотеки node_modules и native node, вам необходимо:

Добавьте target: 'node' к вашему webpack.config.js. Это приведет к исключить из встроенных node модулей (путь, fs и т.д.).
Используйте webpack-node-externals, чтобы исключить все остальные node_modules.

Итак, ваш файл конфигурации результата должен выглядеть так:

var nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node', // in order to ignore built-in modules like path, fs, etc. 
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 
    ...
};

Ответ 3

Это сработало лучше для меня

var _process;

try {
    _process = eval("process");  // avoid browserify shim
} catch (e) {}

var isNode = typeof _process==="object" && _process.toString()==="[object process]";

как Node вернет true и не только браузер вернет false, но browserify не будет включать его process прокладки при компиляции вашего кода. В результате ваш браузерный код будет меньше.

Изменить: я написал пакет, чтобы обработать это более чисто: broquire

Ответ 4

Вы можете использовать require.ensure для расщепления пучков. Например

if (typeof window !== 'undefined') {
    console.log("Loading browser XMLHttpRequest");

    require.ensure([], function(require){

        // require.ensure creates a bundle split-point
        require('./adapters/xhr');
    });
} else if (typeof process !== 'undefined') {
    console.log("Loading node http");

    require.ensure([], function(require){

        // require.ensure creates a bundle split-point
        require('./adapters/http');
    });
}

Смотрите расщепление кода для получения дополнительной информации и примера демонстрационного использования здесь