遷移現有RequireJS應用程序以使用Webpack

我試圖將使用RequireJS的應用程序遷移到Webpack並且存在與現有模塊有關的問題。遷移現有RequireJS應用程序以使用Webpack

下面是應用程序的文件夾結構：

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

LIB和定製文件夾中包含不同的模塊

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的配置文件中還缺少什麼......

來源

2015-10-22 Timka

基於@Tom Chen的評論，我可以挖掘到我的配置進一步通過添加Node並解決它在配置文件中的resolve.modulesDirectories部分鮑爾'模塊。

下面是我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;

來源

2015-11-06 21:34:07 Timka

從你的webpack的錯誤信息，我相信你已經錯過了一些依賴。添加那些resolve.alias對象可能會幫助：

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

來源

2015-10-23 00:26:55

喜湯姆，你能在此擴大一點？我應該把除了''jquery.ui'：'lib/jquery-ui/jquery-ui'，'jquery.validate'：'lib/jquery-validation/dist/jquery.validate'之外的東西放在我的別名對象？ – Timka

是的，只是嘗試和錯誤應該使它的工作。 –

將此行添加到我的'webpack.config.js'中並沒有解決問題。解決的方法是將'Node'和'Bower'模塊包含到'resolve.modulesDirectories'配置參數中。 – Timka

遷移現有RequireJS應用程序以使用Webpack

回答

相關問題