MyTetra Share
Делитесь знаниями!
Условная сборка приложения в webpack с использованием ifdef-loader
Время создания: 02.02.2019 15:08
Автор: br0ke
Текстовые метки: javascript, js, ecmascript, es, node, node.js, webpack, bundler, if, condition, conditional, ifdef, ifdef-loader
Раздел: Информационные технологии - JavaScript - webpack

Если нужно собрать разные версии одного приложения с разными зависимостями и чтобы в бандле не было лишних зависимостей, то можно использовать ifdef-loader для webpack.


https://github.com/nippur72/ifdef-loader


1. Установить ifdef-loader:


npm install --save-def ifdef-loader


2. Добавить ifdef-loader в конец массива обработчиков, чтобы он выполнялся первым (массив выполняется начиная с конца):


rules: [

{

test: /\.js$/,

exclude: [/node_modules/, /\/lib\//],

use: [

{

loader: 'babel-loader',

},

{

loader: 'ifdef-loader',

options: {

'ifdef-triple-slash': false,

USE_FLASH: Number(process.env.USE_FLASH) || false,

},

},

],

},

],


В объекте options перечисляются переменные, в зависимости от которых будет собираться бандл.

В этом объекте есть особые ключи настроек, куда можно присвоить булевские значения:

  • ifdef-triple-slash -- использовать тройные или двойные слеши для комментариев;
  • ifdef-verbose -- выводить подробности.


3. В коде в комментариях объявляются специальные директивы:


// #if USE_FLASH

import embedpano from 'lib/krpano_flash/swfkrpano';

import krpano_swf from 'lib/krpano_flash/krpano.swf';

import 'lib/krpano_flash/krpano.license';

import 'lib/krpano_flash/plugins/snapshot.swf';

// #else

import embedpano from 'lib/krpano/krpano';

const krpano_swf = false;

// #endif


4. В директивах можно использовать любые JS-выражения, например:


/// #if PRODUCTION && version.charAt(0)=='X'

console.log("Ho!");

/// #endif


5. ifdef-loader вырежет лишние части и они не попадут в бандл в зависимости от условий.

Так же в этом разделе:
 
MyTetra Share v.0.53
Яндекс индекс цитирования