迁移现有的 RequireJS 应用程序以使用 Webpack

Question

我正在尝试将我们使用 RequireJS 的应用程序迁移到 Webpack 并遇到现有模块的问题。

以下是应用程序的文件夹结构：

App
--js
----custom
----lib
----app.build.js
----config.js
----app-loader.coffee

lib 和 custom 文件夹包含不同的模块

app.build.js 文件：

({
    appDir: ".",
    baseUrl: ".",
    dir: "../build",
    findNestedDependencies: true,
    mainConfigFile: 'config.js',
    modules: [
        {
            name: "app-loader",
            include: ["domReady"]
        }
    ],
    optimize: "uglify",
    optimizeCss: "none",
    pragmas: {
        logExclude: true
    }
});

config.js：

(function () {
  require.config({
    paths: {
      'bootstrap': 'lib/bootstrap/dist/js/bootstrap',
      'domReady': 'lib/domReady/domReady',
      'jquery': 'lib/jquery/jquery.min',
      'jquery-bbq': 'lib/jquery-bbq/jquery.ba-bbq.min',
      'jquery.browser': 'lib/jquery.browser/dist/jquery.browser',
      'jquery.chosen': 'lib/chosen/chosen.jquery.min',
      'jquery.cookie': 'lib/jquery.cookie/jquery.cookie',
      'jquery.colorpicker': 'lib/jQuery-ColorPicker/colorpicker.min',
      'jquery.fileupload': 'lib/blueimp-file-upload/js/jquery.fileupload',
      'jquery-mobile': 'lib/jquery-mobile-bower/js/jquery.mobile-1.3.2.min',
      'jquery.scrollTo': 'lib/jquery.scrollTo/jquery.scrollTo.min',
      'jquery.tagsinput': 'lib/jquery.tagsinput/src/jquery.tagsinput',
      'jquery.tablednd': 'lib/TableDnD/js/jquery.tablednd',
      'jquery.ui': 'lib/jquery-ui/jquery-ui',
      'jquery.ui.widget': 'lib/blueimp-file-upload/js/vendor/jquery.ui.widget',
      'jquery.validate': 'lib/jquery-validation/dist/jquery.validate',
      'json2': 'lib/JSON-js/json2',
      'swfobject': 'lib/swfobject/swfobject/swfobject',
      'sugar': 'lib/sugar/release/sugar.min',
      'underscore': 'lib/underscore/underscore-min'
    },
    packages: [

    ],
    shim: {
      "bootstrap": { "deps": ['jquery'] },
      'jquery-bbq': {
        deps: ['jquery.browser']
      },
      'jquery.cookie': {
        deps: ['jquery'],
        exports: 'jquery.cookie'
      },
      'jquery.colorpicker': {
        deps: ['jquery']
      },
      'jquery.tablednd': {
        deps: ['jquery']
      },
      'json2': {
        deps: ['jquery'],
        exports: 'JSON'
      },
      'swfobject': {
        exports: 'swfobject'
      },
      'underscore': {
        exports: '_'
      }
    }
  });

}).call(this);

app-loader.coffee：

equire ['config'], ->
  require ['jquery.ui', 'jquery.validate'], ->

    _appDeveloper?()

    require [
      'custom/application/footer'
      'custom/application/floatingwindow'
      'custom/application/join'
      'custom/application/login'
      'custom/application/main'
      'custom/application/menu'
      'custom/application/message'      
      'custom/application/topmenu'      
      ]

我的webpack.config.js：

var webpack = require('webpack'),
    path = require('path'),
    glob = require('glob');

var config = {
    context: __dirname + 'App/js',
    entry: {
        app: 'app-loader.coffee'
    },
    output: {
        path: __dirname + '/public/js',
        filename: '[name].js',
        chunkFilename: '[id].[name].js'
    },
    plugins: [
        new webpack.ProvidePlugin({
            _: 'underscore',
            $: 'jquery'
        })
    ],
    module: {
        loaders: [
            {test: /bootstrap/, loader: 'imports?jquery'},
            {test: /jquery-bbq/, loader: 'imports?jquery.browser'},
            {test: /jquery.cookie/, loader: 'exports?jquery.cookie!imports?jquery'},
            {test: /jquery.colorpicker/, loader: 'imports?jquery'},
            {test: /jquery.tablednd/, loader: 'imports?jquery'},
            {test: /json2/, loader: 'exports?JSON!imports?jquery'},
            {test: /swfobject/, loader: 'exports?swfobject'},
            {test: /\.coffee$/, loader: 'coffee-loader'}
        ]
    },
    resolve: {
        extensions: ['', '.coffee', '.js'],
        root: [__dirname + '/App/js'],
        alias: {
            'bootstrap': 'lib/bootstrap/dist/js/bootstrap',
            'domReady': 'lib/domReady/domReady',
            'jquery': 'lib/jquery/jquery.min',
            'jquery-bbq': 'lib/jquery-bbq/jquery.ba-bbq.min',
            'jquery.browser': 'lib/jquery.browser/dist/jquery.browser',
            'jquery.chosen': 'lib/chosen/chosen.jquery.min',
            'jquery.cookie': 'lib/jquery.cookie/jquery.cookie',
            'jquery.colorpicker': 'lib/jQuery-ColorPicker/colorpicker.min',
            'jquery.fileupload': 'lib/blueimp-file-upload/js/jquery.fileupload',
            'jquery-mobile': 'lib/jquery-mobile-bower/js/jquery.mobile-1.3.2.min',
            'jquery.scrollTo': 'lib/jquery.scrollTo/jquery.scrollTo.min',
            'jquery.tagsinput': 'lib/jquery.tagsinput/src/jquery.tagsinput',
            'jquery.tablednd': 'lib/TableDnD/js/jquery.tablednd',
            'jquery.ui': 'lib/jquery-ui/jquery-ui',
            'jquery.ui.widget': 'lib/blueimp-file-upload/js/vendor/jquery.ui.widget',
            'jquery.validate': 'lib/jquery-validation/dist/jquery.validate',
            'json2': 'lib/JSON-js/json2',
            'swfobject': 'lib/swfobject/swfobject/swfobject',
            'sugar': 'lib/sugar/release/sugar.min',
            'underscore': 'lib/underscore/underscore-min'
        }
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules')
    }
};

module.exports = config;

我一运行webpack，就会收到以下错误消息：

ERROR in /Users/user/project/App/js/app-loader.coffee
Module not found: Error: Cannot resolve module 'jquery
validation/dist/jquery.validate' in /Users/user/project/App/js
@ /Users/user/project/App/js/app-loader.coffee 2:9-7:4

ERROR in /Users/user/project/App/js/app-loader.coffee
Module not found: Error: Cannot resolve module 'jquery-ui/jquery-ui' 
in /Users/user/project/App/js
@ /Users/user/project/App/js/app-loader.coffee 2:9-7:4

ERROR in /Users/user/project/App/js/custom/random/join.coffee
Module not found: Error: Cannot resolve module 'jquery-
validation/dist/jquery.validate' in 
/Users/user/project/App/js/custom/random
@ /Users/user/project/App/js/custom/random/join.coffee 1:0-64:2

不确定我在 webpack 的配置文件中还缺少什么...

Answer 1

根据@Tom Chen 的评论，我能够进一步挖掘我的配置并通过在配置文件的resolve.modulesDirectories 部分添加Node 和“Bower”模块来解决它。

下面是我的 Webpack.config.js 文件：

var webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

var plugins = [
  new webpack.ProvidePlugin({
    '_': 'underscore',
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }),
  new ExtractTextPlugin(__dirname + '/Content/css/[name].css'),
  new webpack.optimize.CommonsChunkPlugin(
    /* chunkName= */"vendor", /* filename= */"vendor.js"
  ),
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 1
  })
];

if (process.env.NODE_ENV === 'production') {
  var optPlugins = [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true
    })
  ];
  plugins = plugins.concat(optPlugins);
}

var config = {
  context: __dirname + '/App/js',
  entry: {
    app: 'app-loader.coffee',
    vendor: [
        'bootstrap',
        'underscore',
        'jquery',
        'jquery-bbq',
        'jquery.chosen',
        'jquery.browser',
        'jquery.cookie',
        'jquery.colorpicker',
        'jquery.fileupload',
        'jquery.scrollTo',
        'jquery.tagsinput',
        'jquery.tablednd',
        'jquery.ui',
        'jquery.ui.widget',
        'jquery.validate',
        'json2',
        'swfobject',
        'sugar'
    ]
  },
  output: {
    path: __dirname + '/Content/js',
    filename: 'app-loader.js'
  },
  amd: {
    jQuery: true
  },
  node: {
    fs: 'empty'
  },
  module: {
    loaders: [
        { test: /bootstrap/, loader: 'imports?jQuery=jquery' },
        { test: /jquery.cookie/, loader: 'exports?jquery.cookie!imports?jquery' },
        { test: /jquery.colorpicker/, loader: 'imports?jquery' },
        { test: /jquery.tablednd/, loader: 'imports?jquery' },
        { test: /json2/, loader: 'exports?JSON!imports?jquery' },
        { test: /swfobject/, loader: 'exports?swfobject' },
        { test: /\.coffee$/, loader: 'coffee-loader' },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract(
              'style-loader',
              'css-loader'
          )
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract(
              'style-loader',
              '!css-loader!sass-loader'
          )
        },
        {
          test: /\.less$/,
          loader: ExtractTextPlugin.extract(
              'style-loader',
              'css-loader!less-loader'
          )
        }
    ]
  },
  plugins: plugins,
  resolve: {
    extensions: ['', '.coffee', '.js', '.json'],
    root: [path.resolve(__dirname + '/App/js')],
    alias: {
      'jquery': 'jquery/jquery',
      'jquery-bbq': 'jquery-bbq/jquery.ba-bbq',
      'jquery.cookie': 'jquery.cookie/jquery.cookie',
      'jquery.chosen': 'chosen/chosen.jquery.min',
      'jquery.colorpicker': 'jQuery-ColorPicker/colorpicker',
      'jquery.fileupload': 'blueimp-file-upload/js/jquery.fileupload',
      'jquery.scrollTo': 'jquery.scrollto/jquery.scrollTo',
      'jquery.tagsinput': 'jquery-tags-input/src/jquery.tagsinput',
      'jquery.tablednd': 'TableDnD/js/jquery.tablednd',
      'jquery.ui': 'jquery-ui/jquery-ui',
      'jquery.ui.widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget',
      'jquery.validate': 'jquery-validation/dist/jquery.validate',
      'json2': 'JSON-js/json2'
    },
    modulesDirectories: [
        'node_modules',
        'bower_components'
    ],
    bail: true,
    stats: {
      colors: true,
      modules: true,
      reasons: true
    }
  }
};

module.exports = config;

Answer 2

从您的 webpack 错误消息来看，我相信您错过了一些依赖项。将这些添加到 resolve.alias 对象可能会有所帮助：

'jqueryvalidation/dist/jquery.validate', 'jquery-ui/jquery-ui',