我对自动化任务很陌生,所以我可能会在这里稍微离开。我有一个gulp任务,使用Browserify来构建我的核心JS文件。
/*jslint node: true */
'use strict';
var args = require('yargs').argv,
bowerJson = require('../../bower.json'),
del = require('del'),
gulp = require('gulp'),
jsmerge = require('./jsmerge'),
logger = require('@slomka/gulp-logger'),
run = require('gulp-run'),
runSequence = require('run-sequence');
webpack = require('webpack');
var source = require('vinyl-source-stream');
var webAppFolder = './slomka.Gx.Web.App';
var bundles = [
webAppFolder + '/JavaScript/Namespacing.js',
webAppFolder + '/JavaScript/slomka.Utils.js',
webAppFolder + '/JavaScript/slomka.Editor.js',
webAppFolder + '/JavaScript/slomka.DocumentEditor.js'
];
var slomkaCoreJs = [
'JavaScript/slomka.Config.js',
'JavaScript/slomka.Error.js',
'JavaScript/slomka.Polyfill.js',
'JavaScript/slomka.Validator.js',
'JavaScript/3rdParty/telerik.js',
'JavaScript/3rdParty/Kendo.all.min.js',
'JavaScript/FileLinks.js',
'JavaScript/ColorPicker.js',
'Javascript/ButtonUtils.js',
'JavaScript/slomka.Kendo.js',
'JavaScript/slomka.Resource.Review.js',
'JavaScript/slomka.Resource.Section.js',
'JavaScript/FeatureDecisions.js',
'App_GxPages/MasterPages/header.ascx.js'
];
gulp.task('js:core:clean', function () {
return del(webAppFolder + '/static/js/core.*');
});
gulp.task('js:core:thirdparty:clean', function () {
return del(webAppFolder + '/static/js/thirdparty.min.*');
});
gulp.task('js:core:thirdparty', ['js:core:thirdparty:static'], function () {
const wiredep = require('wiredep');
return jsmerge(
gulp, [
gulp.src(wiredep({ bowerJson: bowerJson, directory: webAppFolder + '/bower_components' }).js),
gulp.src([
'node_modules/@gx/test-table-execution/dist/*.js',
'node_modules/@gx/columnresize/dist/*.js',
'node_modules/@gx/ddt/dist/*.js',
'node_modules/@gx/jquery-contextmenu/dist/*.js',
'node_modules/@gx/legacy-history-dialog/dist/*.js',
'node_modules/@slomka/javascript-detect-element-resize/jquery.resize.js',
'node_modules/@slomka/slomka-sticky-headers/dist/slomka-sticky-headers.js'
])
],
'thirdparty.min.js',
webAppFolder + '/static/js',
true,
logger('js:core:thirdparty')
)();
});
gulp.task('js:core:thirdparty:static', ['js:core:thirdparty:static:clean'], function () {
var copyitem = 'copy-item .\\node_modules\\@gx\\*\\dist\\static\\ .\\slomka.Gx.Web.App\\static\\thirdparty\\ -recurse -force';
return run(copyitem, { usePowerShell: true }).exec();
});
gulp.task('js:core:thirdparty:static:clean', function () {
return del(webAppFolder + '/static/thirdparty/**');
});
gulp.task('js:core', ['js:core:clean'], function () {
if (!args.production)
runSequence('js:lint');
var thirdpartySource = gulp.src('thirdparty.min.js', { cwd: webAppFolder + '/static/js' });
var coreSource = gulp.src(slomkaCoreJs, { cwd: webAppFolder });
var bundledSource = browserify({
entries: bundles
})
.transform('babelify',{ global: true })
.transform('envify', {
global: true,
NODE_ENV: args.production ? 'production' : 'development'
})
.bundle()
.pipe(source('bundled.js'));
return jsmerge(
gulp, [thirdpartySource, bundledSource, coreSource],
'core.js',
webAppFolder + '/static/js',
false,
logger('js:core')
)();
});
gulp.task('js:core:watch', function () {
gulp.watch(slomkaCoreJs, { cwd: webAppFolder }, ['js:core']);
});
现在我尝试删除browserify并添加webpack来执行此构建。但我有问题尝试将所有人捆绑在一起。使用webpack的目标不是捆绑本身,我正在迁移以在其他东西上使用把手模板。
在这种情况下,我有几个问题:
在我的webpack.config.js中我需要对每个JS文件进行硬编码吗?例如
const path = require('path');
const webpack = require('webpack');
var webAppFolder = './slomka.Gx.Web.App';
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
thirdparty: './../static/js/thirdparty.min.js',
namespacing: webAppFolder + '/JavaScript/Namespacing.js',
utils: webAppFolder + '/JavaScript/slomka.Utils.js',
.... etc for the rest..
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
};
我是否需要为babelify配置管道,或者Webpack可以为我处理这个问题?我尝试为我的webpack配置添加此配置。
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
}
迁移到webpack后,我会有热门变化手表吗?