Javascript требует разработки, но скомпилирован в производстве

Я начинаю оценивать инструменты модуля javascript, такие как RequireJS для модуляции javascript. Это кажется полезным, особенно во время разработки, поэтому мне не нужно перекомпилировать все js файлы в mylib-<version>.js всякий раз, когда я меняю один из зависимых файлов.

Мое приложение распространяется как с файлами html, так и с javascript, и в процессе производства я хотел бы использовать скомпилированную версию файла javascript.

Итак, в разработке мой html файл может выглядеть примерно как

<html>
  <head>
    <script data-main="scripts/main" src="scripts/require.js"></script>
  </head>
</html>

Но в производстве я бы ожидал, что он будет больше похож на

<html>
  <head>
    <script src="mylib-1.0.js"></script>
  </head>
</html>

Я бы не думал, что это производство, что мне нужно будет ссылаться на requirejs, если я распространяю скомпилированный файл.

Есть ли способ сделать это без необходимости вручную изменять мои html файлы, прежде чем распространять приложение?

Ответ 1

RequireJs имеет инструмент оптимизации, который может помочь вам минимизировать и объединить ваши модули. Он имеет множество опций и может быть трудным в использовании, но с помощью инструмента построения, такого как GruntJs или (особенно) Yeoman, который использует GruntJs для сборки.

В обоих случаях вы можете использовать задачу rjs (которая оптимизирует модули), но снова Yeoman немного проще, поскольку у нее есть генераторы, которые будут настраивать ее уже для вас:

// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
  html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
  // no minification, is done by the min task
  optimize: 'none',
  baseUrl: './scripts',
  wrap: true,
  name: 'main'
},

В index.html вы просто используете строку комментария, чтобы указать, какие js файлы должны быть минитизированы/объединены в выходной файл:

    <!-- build:js scripts/amd-app.js -->
    <script data-main="scripts/main" src="scripts/vendor/require.js"></script>
    <!-- endbuild -->

В приведенном выше примере модули будут объединены в один файл с именем amd-app.js.

Edit:

Это будет выполнено путем выполнения grunt из командной строки. Это запустит множество полезных задач, которые будут строить проект в папке dist, но опять же это очень удобно.

Результирующий файл index.html (в dist) имеет только (если хотите) один файл javascript:

<script src="scripts/15964141.amd-app.js"></script>

Мой совет: используйте Йомен, чтобы облегчить жизнь (по крайней мере, для обработки minification/concatenation).

Ответ 2

Сначала вам нужно скомпилировать дерево зависимостей в один файл с помощью r компилятора. После этого вы можете разделить проигрыватель AMD, например almond. По крайней мере, вам нужно найти способ изменить URL-адрес в вашем индексе html.

Взгляните на gruntjs, который может автоматизировать все это, там задача сгруппирована как usemin, который поможет вам в этом процессе.