如何使用webpack構建requirejs應用程序？

Question

我有一個requirejs應用程序，它從下面粘貼的require配置中加載。 對供應商目錄的路徑引用是通過bower加載的第三方庫。

// 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) {});

我在控制台中遇到的問題是我找不到我的引導文件，這只會讓我相信我的require.config中沒有加載require.config 。

$ webpack ./app/config/requirejs.js ../build/test.js哈希：f33deaf4b2ff288e08b6版本：webpack 1.5.3時間：61ms資產大小塊塊名稱test.js 2435 0 [emit] main [0] ./ app / config / requirejs.js 1691 {0} [建造] [3錯誤]

./app/config/requirejs.js中的錯誤找不到模塊：錯誤：無法解析/ Users / glitches / Sites / public / js / app / config @ ./app/config/requirejs.js中的模塊'bootstrap / backbone' 35：0-45

./app/config/requirejs.js中的錯誤找不到模塊：錯誤：無法解析/ Users / glitches / Sites / public / js / app / config @ ./app/config/requirejs.js中的模塊'bootstrap / jquery' 36：0-43

./app/config/requirejs.js中的錯誤找不到模塊：錯誤：無法解析/ Users / glitches / Sites / public / js / app / config @ ./app/config/requirejs.js中的模塊'init / Main' 39：0-41

我猜我需要重寫我的requirejs配置作為入口點，但我在這里問，如果有人對如何解決這個問題有更好的了解。

Answer 1

您的require語句嘗試解析為node_modules文件夾中的模塊，因為沒有絕對路徑或相對路徑。

如何解析模塊，具體取決於路徑類型。

如果您需要應用程序源中的文件，請使用相對路徑或絕對路徑。

// 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。