javascript - 如何使用 webpack 构建 requirejs 应用程序？

Question

我有一个 requirejs 应用程序，它从下面粘贴的 require 配置中加载。 vendor 目录的路径引用是通过 Bower 加载的第 3 方库。

// Require.js Configurations
// -------------------------
require.config({
  baseUrl: './js/app',

  paths: {
    'backbone'            : '../../vendor/backbone/backbone',
    'backbone.paginator'  : '../../vendor/backbone.paginator/lib/backbone.paginator',
    'backbone.validateAll': '../../vendor/Backbone.validateAll/src/javascripts/Backbone.validateAll.js',
    'backbone.wreqr'      : '../../vendor/backbone.wreqr/lib/backbone.wreqr.js',
    'handlebars'          : '../../vendor/handlebars/handlebars.runtime',
    'handlebars-helpers'  : '../../vendor/handlebars-helpers/src/helpers',
    'jasminejquery'       : '../../vendor/jasmine-jquery/lib/jasmine-jquery',
    'jquery'              : '../../vendor/jquery/dist/jquery',
    'jquerymobile'        : '../../vendor/jquery-mobile-bower/js/jquery.mobile-1.4.5',
    'loglevel'            : '../../vendor/loglevel/lib/loglevel',
    'marionette'          : '../../vendor/marionette/lib/backbone.marionette',
    'modernizr'           : '../../vendor/modernizr/modernizr',
    'moment'              : '../../vendor/moment/moment',
    'swiper'              : '../../vendor/swiper/dist/idangerous.swiper',
    'templates/jst'       : '../../build/tmp/templates/jst-build',
    'underscore'          : '../../vendor/lodash/dist/lodash'
  },

  shim: {
    'backbone.validateAll'  : ['backbone'],
    'jasminejquery'         : ['jquery'],
    'jquerymobile'          : ['jquery'],
    'modernizr'             : { exports: 'Modernizr' },
    'swiper'                : ['jquery']
  }
});

// Bootstraps
require(['bootstrap/backbone'], function(){});
require(['bootstrap/jquery'], function(){});

// App
require(['init/Main'], function(main) {});

我在控制台中遇到的问题是找不到我的 Bootstrap 文件，这只会让我相信 webpack 没有加载到我的 require.config 中。

$ webpack ./app/config/requirejs.js ../build/test.js Hash: f33deaf4b2ff288e08b6 Version: webpack 1.5.3 Time: 61ms Asset Size Chunks Chunk Names test.js 2435 0 [emitted] main [0] ./app/config/requirejs.js 1691 {0} [built] [3 errors]

./app/config/requirejs.js 中的错误未找到模块:错误:无法 解析模块“bootstrap/backbone” /用户/故障/网站/公共(public)/js/app/config @ ./app/config/requirejs.js 35:0-45

./app/config/requirejs.js 中的错误未找到模块:错误:无法 在中解析模块'bootstrap/jquery' /用户/故障/网站/公共(public)/js/app/config @ ./app/config/requirejs.js 36:0-43

./app/config/requirejs.js 中的错误未找到模块:错误:无法 在中解析模块“init/Main” /用户/故障/网站/公共(public)/js/app/config @ ./app/config/requirejs.js 39:0-41

我猜我需要重写我的 requirejs 配置作为入口点，但我在这里问，以防有人对如何去做有更好的了解。

Answer 1

您的 require 语句试图解析为您的 node_modules 文件夹中的模块，因为没有绝对或相对路径。

How modules are resolved, depending on path type.

如果您需要应用程序源中的文件，请使用相对或绝对路径。

// Bootstraps
require(['../bootstrap/backbone'], function(){});
require(['../bootstrap/jquery'], function(){});

// App
require(['../init/Main'], function(main) {});

这假定一个结构，其中它位于 /app/config/requirejs.js 并且您的目标模块位于 /app/bootstrap/backbone.js，/app/bootstrap/jquery.js 和 /app/init/Main.js。