在Gulp Task中从Browserify迁移到Webpack

时间:2017-12-13 10:51:58

标签: javascript webpack gulp

我对自动化任务很陌生,所以我可能会在这里稍微离开。我有一个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后,我会有热门变化手表吗?

0 个答案:

没有答案