迁移现有的RequireJS应用来使用Webpack
Migrate existing RequireJS app to use Webpack
我正在尝试将我们使用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'
]
我的<<p> strong> 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的配置文件中缺少什么…
基于@Tom Chen的评论,我能够进一步挖掘我的配置,并通过在配置文件的resolve.modulesDirectories
部分添加Node
和'Bower'模块来解决它。
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;
从你的webpack错误信息中,我相信你错过了一些依赖项。将这些添加到resolve.alias
对象可能会有所帮助:
'jqueryvalidation/dist/jquery.validate', 'jquery-ui/jquery-ui',
相关文章:
- vendors.js:未捕获类型错误:无法读取属性'应用'使用webpack时未定义的
- 为具有核心模块和子模块的应用程序构建Webpack
- 哪个webpack开发工具适合chrome应用程序
- 如何使用webpack构建requirejs应用程序
- Webpack:拆分供应商和应用程序代码
- webpack的库和客户端应用程序配置
- 为什么 React 应用程序的生产版本(使用 Webpack 和 Babel)使用 HMR 的错误开发环境,从而导致错误
- 如何使用具有多个入口点的 Webpack 和 Gulp 来转译应用程序和测试目录
- Webpack - 将应用程序部署到不同的环境
- 将js应用程序与webpack捆绑在一起,以获得wordpress插件
- 使用 Gulp 运行 Webpack + Babel,但没有应用任何预设
- 将 webpack 资产提供给 ASP.NET 应用程序
- 用于开发和生产构建的带有Webpack的角度应用程序API URL配置
- 运行Marionette的Webpack应用程序中的外部模板
- webpack reactjs应用程序加载失败:Uncaught ReferenceError:未定义snapapp
- 生成webpack应用程序时引发此错误的原因
- 如何高效地调试webpack应用程序
- 迁移现有的RequireJS应用来使用Webpack
- Webpack在生产环境中的应用:为什么会出现React Native错误
- 如何使用Webpack开发服务器部署Webpack应用程序?