将基于Requirejs和Backbone的应用程序迁移到WebPack [英] Migrating Requirejs and Backbone based application to WebPack

问题描述

我有一个使用Backbone.js和Marionette和Requirejs开发的大型应用程序，我们使用Grunt进行构建.我需要将Requirejs迁移到Webpack，因为我们经常看到模块加载超时.我觉得Webpack的多入口点方法比使用Requirejs将单页转换为多页更好.

I have a large application developed using Backbone.js and Marionette with Requirejs.We are using Grunt for build. I need to migrate Requirejs to Webpack as we are frequently seeing Module Load Timeout. I feel that multiple entry point approach of Webpack is a better approach than to convert single page to multi-page using Requirejs.

总体而言，我们大约有400个js文件和250个html [partial]文件.项目结构是

Overall we have approximately 400 js file and 250 html[partial] files. The project structure is

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

requirejs配置文件如下所示:

The requirejs config file appear as below:

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'],
        ....
        }
    }
})

/static指向我们在nginx配置中指定的位置，以提供css，js等内容.

Here /static point to location that we have specified in nginx configuration to serve content like css, js etc.

要将其转换为webpack配置，我从webpack配置文件开始，首先创建单个文件.而不是从多个条目开始.

To convert the same to webpack configuration I started with webpack config file to first create single file. And not starting with the multiple entry.

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的应用程序中，模块的指定方式类似于

In my requirejs based application, the modules are specified like

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

...
....
}

运行webpack时，出现错误无法解析模块模板/common/popup-template.html".但是，此html是Backbone视图用来创建视图的部分html/模板.

When I run webpack, I get error "Can not resolve module templates/common/popup-template.html ". However this html is a partial html/template to used by Backbone view to create views.

在其中一个站点中，我看到了需要html-loader插件的地方.然后在webpack config"text":"html"中设置一个别名.并将类似"text！templates/common/popup-template.html"的行更改为"[exact path]/templates/common/popup-template.html".这意味着我将需要更改很多代码.

In one of the sites I saw that I need to html-loader plugin. And then set an alias in webpack config "text":"html". And change lines like this 'text!templates/common/popup-template.html' to '[exact path]/templates/common/popup-template.html'. That means I will need to change lots of code.

是否有更好的迁移方法?

Is there a better approach for this migration?

谢谢 普拉迪普(Pradeep)

thanks Pradeep

推荐答案

您需要text-loader插件，而不是"html".您也不需要在config中编写任何内容.依赖项中的前缀text-loader!将对其进行附加.

You need text-loader plugin, not "html". You also don't need to write anything in config. Prefix text-loader! in dependency will attach it.

只需尝试 npm install text-loader --save-dev

这篇关于将基于Requirejs和Backbone的应用程序迁移到WebPack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！