easimonenko
@easimonenko
Преподаватель, блоггер.

Как сделать bundle с помощью browserify без включения внешних модулей, которые будут подгружаться с CDN?

Как известно, по-умолчанию browserify при создании bundle включает в него и сторонние модули из NPM. Но я бы хотел, чтобы эти модули подгружались с CDN, а в bundle был только мой собственный код. Пробовал опции для browserify: exclude, external, ignore. Но всё это приводило к тому, что сторонние модули не были найдены. Ниже код html:

<!doctype html>

<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p style="color: darkred;">JavaScript is not allowed either in the app error.</p>
    </div>
    <script src="app.js"></script>
  </body>
</html>


Фрагмент кода gulpfile.js:

gulp.task('bundle', ['compile'], () => {
  //var b = browserify('build/spa/Main.js', {bundleExternal: false});
  var b = browserify('build/spa/Main.js');
  b
    //.ignore('react')
    //.ignore('react-dom')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist'));
  gulp
    .src('src/spa/index.html')
    .pipe(gulp.dest('dist'));
});


UPD1. Думаю нужно сделать дополнение. Код JavaScript является результатом компиляции кода на TypeScript с опцией module: commonjs. В коде JavaScript после компиляции появляются вызовы require(). Так вот, если код сторонних модулей не включать в bundle, то этот вызов require() терпит фиаско. С другими типами модулей та же история.

UPD2. Проблему удалось решить самостоятельно. См. ниже.
  • Вопрос задан
  • 426 просмотров
Решения вопроса 1
easimonenko
@easimonenko Автор вопроса
Преподаватель, блоггер.
Итак, моё решение проблемы, найденное после перерыва на физкультуру и последующего перечитывания README пакета browserify-shim:

Ставим модуль browserify-shim:
npm install browserify-shim --save

Добавляем в package.json проекта следующие строчки:
"browserify": {
    "transform": ["browserify-shim"]
  },
  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }


В gulpfile.js заменяем строку:
var b = browserify('build/spa/Main.js');
на строку:
var b = browserify('build/spa/Main.js', {bundleExternal: false});


Запускаем пересборку приложения, и вуаля, всё работает! :-)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы