将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

回答

相关问题