將Requirejs和基於Backbone的應用程序遷移到WebPack

我有一個使用Backbone.js和Marionette與Requirejs開發的大型應用程序。我們正在使用Grunt進行構建。我們需要將Requirejs遷移到Webpack，因爲我們經常看到模塊加載超時。我覺得Webpack的多入口點方法比使用Requirejs將單頁轉換爲多頁更好。將Requirejs和基於Backbone的應用程序遷移到WebPack

總的來說，我們有大約400個js文件和250個html [部分]文件。這個項目的結構

app 
    |--modules 
    |  |-- module-A 
    |  |- model 
    |  |- collection   
    |  |- view 
    |  |- module_utils 
    |  |-- module-B 
    | 
    |---templates 
     |-- module-A 
     |- view-1.html 
     |- view-2.html   
     |-- module-B

的requirejs配置文件出現如下：

require.config({ 
    paths: { 
     templates: "./../templates", 
     jquery: "/static/lib/jquery/jquery.min", 
     jquerymigrate: "/static/lib/jquery/jquery-migrate.min", 
     jqueryui: "/static/lib/jqueryui/ui/minified/jquery-ui.custom.min", 
     bootstrap: "/static/lib/bootstrap-3.1.1/dist/js/bootstrap", 
     ... 

    }, 

    shim: { 
     'jquerymigrate': ['jquery'], 
     'jquerybackstretch': ['jquery'], 
     'jqueryuniform': ['jquery'], 
     'jqueryui': ['jquery','jquerymigrate'], 
     'bootstrap': ['jquery'], 
     .... 
     } 
    } 
})

這裏/靜態點的位置，我們在nginx的配置中已指定服務如CSS內容，JS等

要將其轉換爲webpack配置，我首先使用webpack配置文件創建單個文件。而不是從多個條目開始。

var webpack = require("webpack"); 
var path = require("path"); 

module.exports = { 
    entry: "./app.js", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    resolve: { 
     alias: { 
      "templates": "./../templates", 
      "jquery": "../../lib/jquery/jquery.min", 
      "jquerymigrate": "./..//lib/jquery/jquery-migrate.min", 
      "jqueryui": "../../lib/jqueryui/ui/minified/jquery-ui.custom.min", 
      "bootstrap": "../../lib/bootstrap-3.1.1/dist/js/bootstrap", 
      "moment": "../../lib/moment/min/moment.min", 
      .... 

     } , 
     extensions: ['', '.js'], 
     modulesDirectories: [ __dirname], 
     root: [path.resolve('./../app/modules/')] 

    } 
} 

function escapeRegExpString(str) { return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); } 
function pathToRegExp(p) { return new RegExp("^" + escapeRegExpString(p)); }

在我requirejs基礎的應用，該模塊就像

define([ 
    'underscore', 
    'backbone', 
    'utils', 
    'core/constants', 
    'text!templates/common/popup-template.html' 
], function(_, Backbone, Utils, Constants, template) { 

... 
.... 
}

指定當我運行的WebPack，我得到錯誤「無法解析模塊模板/通用/彈出窗口template.html」。然而，這個html是Backbone視圖用來創建視圖的部分html /模板。

在我看到的一個網站中，我需要html-loader插件。然後在webpack config「text」中設置一個別名：「html」。並將這樣的'text！templates/common/popup-template.html'這樣的行更改爲'[exact path] /templates/common/popup-template.html'。這意味着我需要更改大量的代碼。

這種遷移有更好的方法嗎？

感謝普拉迪普

來源

2016-08-01 user1050134

你需要text-loader插件，而不是「HTML」。你也不需要在config中寫任何東西。依賴關係中的前綴text!將附加它。

試試看 npm install text-loader --save-dev

來源

2016-08-01 05:54:03

由於梅德。我現在試了一下。但似乎我已經用路徑做了菜鳥的錯誤。因此，我收到錯誤「./app/modules/core/account.js中的錯誤」模塊未找到：錯誤：無法解析d：\ project \ app \中的模塊'templates/common/popup-template.html' modules \ core \ @ ./app/modules/core/account.js 2：0-144：2「。它正在尋找模板文件夾在看起來不對的地方。 – user1050134

嘗試改爲別名：{「templates」：「./../templates」，...' - >'root：[path.resolve（'./../ app/modules /'），path.resolve （'./../ app /'）]' –

OR：'別名：{templates：path.resolve（__dirname，'..'，'templates'），...' –

將Requirejs和基於Backbone的應用程序遷移到WebPack

回答

相關問題