将基于 Requirejs 和 Backbone 的应用程序迁移到 WebPack

Question

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

我们总共有大约 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'],
        ....
        }
    }
})

这里的 /static 指向我们在 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 时，我得到错误 "Can not resolve module templates/common/popup-template.html "。但是，此 html 是部分 html/template 供 Backbone 视图用于创建视图。

在其中一个站点中，我看到我需要 html-loader 插件。然后在webpack config中设置别名"text":"html"。并将 'text!templates/common/popup-template.html' 这样的行更改为“[确切路径]/templates/common/popup-template.html”。这意味着我将需要更改大量代码。

这次迁移有更好的方法吗？

谢谢普拉迪普

Answer 1

您需要 text-loader 插件，而不是 "html"。你也不需要在配置中写任何东西。依赖中的前缀 text-loader! 将附加它。

试试吧 npm install text-loader --save-dev

将基于 Requirejs 和 Backbone 的应用程序迁移到 WebPack

Migrating Requirejs and Backbone based application to WebPack

requirejs

backbone.js

webpack