gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:57:36 25 4
gpt4 key购买 nike

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

下面是应用程序的文件夹结构:

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

libcustom 文件夹包含不同的模块

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

最佳答案

基于 @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;

关于javascript - 迁移现有的 RequireJS 应用程序以使用 Webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33291349/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com