RequireJS Optimization

Question

Я использую r.js для оптимизации своего приложения, как я видел в нескольких примерах, я использовал файл конфигурации build.json для настройки параметров оптимизации.

Проблема в том, что когда я устанавливаю ссылку на выходной файл JavaScript после оптимизации, я получаю следующую ошибку в браузере:

Uncaught ReferenceError: define не определено main-built.js:14735

Похоже, все мои модули приложения существуют, но RequireJs отсутствует.

Это мой конфигурационный файл build.json:

{
  "baseUrl": "../", 
  "name": "src/modules/main",
  "include": ["src/modules/main", "src/modules/navbar/navbar", "src/modules/contact/contact", "src/modules/about/about"], 
  "exclude": [], "optimize": "none", "out": "main-built.js", 
  "insertRequire": ["src/modules/main"]
}

Как добавить requirejs в выходной файл js? Может быть, мне нужно добавить что-то еще в конфигурации? или может проблема не в конфиге?

Спасибо ори

Answer 1

Пытаться:

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

Answer 2

Если я правильно понял, вот как это должно работать.

Что делает r.js, так это то, что он компилирует все модули RequireJS в один файл. Однако вам все равно нужно загрузить этот файл с помощью скрипта RequireJS, например:

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

Так что просто добавьте уменьшенную версию require.js на ваш сайт и загрузите оптимизированный модуль, используя это.

Answer 3

Вы должны включить require.js если вы модулировали свой проект с помощью RequireJS:

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

Это связано с тем, что RequireJS управляет загрузкой модулей и разрешением зависимостей. Без этого ваш браузер не знает что define средства. Чтобы обойти это, используйте UMD (определение универсального модуля). Это позволяет использовать ваш модуль с RequireJS или без нее. Вы можете увидеть много примеров здесь. Тот, который соответствует вашему варианту использования:

// Uses AMD or browser globals to create a module.

// If you want something that will also work in Node, see returnExports.js
// If you want to support other stricter CommonJS environments,
// or if you need to create a circular dependency, see commonJsStrict.js

// Defines a module "amdWeb" that depends another module called "b".
// Note that the name of the module is implied by the file name. It is best
// if the file name and the exported global have matching names.

// If the 'b' module also uses this type of boilerplate, then
// in the browser, it will create a global .b that is used below.

// If you do not want to support the browser global path, then you
// can remove the `root` use and the passing `this` as the first arg to
// the top function.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else {
        // Browser globals
        root.amdWeb = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));