使用requirejs并尝试将javascript优化为供应商文件和应用程序文件

Question

我正在使用requirejs进行一个项目，并试图将我的javascript优化为两个文件:供应商库和应用程序代码。不幸的是，我似乎无法让它起作用。

文件夹结构：

• 骨干部件/
• app/
  • 减/
  • js/
    • 组件1/
    • 组件2/
    • 布局/
      • 仪表盘/
      • 约/

​

    - lib/
    - config.js
    - main.js

​

- index.html

​

• 区/区
• Gruntfile.js

config.js:

require.config({
  baseUrl: '../js/',
  paths: {
    jquery:     '../../bower_components/jquery/dist/jquery',
    underscore: '../../bower_components/lodash/dist/lodash',
    backbone:   '../../bower_components/backbone/backbone',
    text:       '../../bower_components/requirejs-text/text'
  },
  enforeceDefine: true
});

define(['backbone', 'main'], function(Backbone, app) {
});

Gruntfile.js:

requirejs: {
  options: {
    dir: 'dist/js/',
    mainConfigFile: 'app/js/config.js',
    optimize: 'none', 
    normalizeDirDefines: 'all',
    skipDirOptimize: true
  },
  dist: {
    options: {
      modules: [
        {
          name: 'vendor',
          include: ['jquery', 'underscore', 'backbone', 'text'],
        },
        {
          name: 'app',
          exclude: ['vendor']
        }
      ]
    }
  }
});

当我运行grunt时，我会得到以下错误："Error: error: module不存在: / path /to/project/app/js/app/js/vendor.js，用于名为:供应商的模块。“

当它还不存在的时候，它为什么要寻找“供应商”呢？

Answer 1

我认为您要优化的源代码中没有名为vendor的模块。如果这是正确的，那么您所得到的错误是因为r.js正在寻找一个名为vendor的模块。您必须告诉它使用create选项创建它：

modules: [
    {
      name: 'vendor',
      create: true,            // <--- Add this option!
      include: ['jquery', 'underscore', 'backbone', 'text']
    },
    {
      name: 'app',
      exclude: ['vendor']
    }
]

如果没有选项，r.js会理解您实际上是在说“拿起vendor模块，并将jquery等包含在其中。”使用该选项，您将告诉它从头开始创建vendor。

create选项被记录为在这个文件中。