использование global для зависимости с помощью grunt-browserify

Я использую yepnope для условной загрузки скриптов на основе некоторых тестов, а также использую browserify через grunt-browserify для создания своих скриптов. Теперь я хочу, чтобы один скрипт заменял другой, но по-прежнему вызывался через тот же запрос:

// if svg support, then d3.js, otherwise r2d3.js
var d3 = require('d3');

Так что d3 используется как требование в моем коде, а также как зависимость для другой библиотеки.

Проблема в том, что это нельзя сделать с помощью разных операторов require, потому что они выполняются во время сборки, а тест не может быть выполнен, потому что это зависит от браузера пользователя.

Поэтому мне нужен способ указать, что зависимость использует d3 из window.d3, поэтому я могу установить объект окна с помощью любой из библиотек. Это моя конфигурация grunt-browserify.

options: {
  external: ['d3'],
  shim: {
    'd3-chart': {
       path: 'assets/bower_components/d3.chart/d3.chart.js',
       exports: null,
       depends: {
         d3: 'd3'
       }
    }
  }
}

Я получаю Cannot find module 'd3' при загрузке r2d3, хотя это экспортирует window.d3< /а>.


d3.js browserify gruntjs dynamic-script-loading yepnope
person knownasilya    schedule 14.03.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Что касается Browserify, если вы используете Browserify 3.0, вы можете использовать браузер -shim как преобразование и предоставляет глобальную ссылку на d3, вставив ссылку на D3 в ваш package.json следующим образом:

 "browserify-shim": {
   "d3": "global:d3"
 }

После установки прокладки потребуется добавить преобразование для браузерную оболочку, если вы еще этого не сделали

options: {
  transform: ['browserify-shim']
}

Я не смог убедиться, что это работает правильно в моей сборке, так как обнаружил альтернативное решение для моего проблема (я использую xCharts). (Более того, я просто переключился на gulp.)

person zedd45    schedule 09.05.2014
comment
Я думаю глобальный: на самом деле пропускает анализ зависимости в пакете. Я вернусь и отредактирую это; Сегодня я рефакторинг своего приложения с реальными данными... - person zedd45; 14.05.2014
comment
Кажется, я не могу предложить изменить ваш ответ. Строка 2 должна быть d3: global:d3. Глобал d3 имеет строчную букву d. - person Dominick; 30.03.2016
comment
Спасибо @Доминик! У меня была такая же проблема в другом посте; он не позволит вам редактировать, если в нем так много символов. Я применил вашу правку. - person zedd45; 30.03.2016

arrow_upward
3
arrow_downward

Есть несколько способов справиться с этим с помощью браузера.

1.) Вы можете использовать нагрузку в своих библиотеках D3 условно вне браузера и создать файл, который:

'use strict';
module.exports = window.D3

затем, когда вы используете диаграмму D3 в своем коде, требуется этот файл.

2.) Другим способом может быть использование promethify, где это может потребоваться условно. https://github.com/johnkpaul/promethify

3.) Вы можете вручную изменить его, экспортировав функцию, которая принимает d3 в качестве параметра:

https://gist.github.com/michaelBenin/9557281
var d3 = window.d3;
require('../d3-plugin/d3.chart.js')(d3);

4.) У вас может быть 2 сборки браузера, одна для устаревшей версии, другая для современной.

Я бы выбрал вариант 3 и передал window.d3 в качестве аргумента.

Обновление: также извлеките exposify вместо использования window.D3 https://github.com/thlorenz/exposify

person Michael Benin    schedule 14.03.2014