Question

我正在使用Browserify和Gulp编译一些ES6 - ＆gt; ES5并为我的文件进行基本连接。现在我的所有项目都有不同的Javascript文件，允许用户将文件上传到Google Cloud存储桶。

当我通过仅编译我的一个文件测试一些东西时，Browserify由于某种原因，将我的Javascript编译成一个超过2MB的巨大文件。经过进一步检查后，似乎Browserify正在将其依赖项并将其添加到我的文件中，这似乎是不必要的。

主要问题是Browserify在我输出的Javascript中包含了自己的node_modules。

下面是一些文件设置示例，其中包含我正在接收的输出。

测试Javascript文件（text.js）

这是一个简单的文件，它使用npm包在上传内容时发送文本并导出所需的函数。

'use strict'
function sendText(name) {
  // Twilio Credentials
  var accountSid = '<SID NUMBER>';
  var authToken = '<AUTH NUMBER>';

  //require the Twilio module and create a REST client
  var client = require('twilio')(accountSid, authToken);

  client.messages.create({
   to: '<TO NUMBER>',
   from: '<FROM NUMBER>',
   body: 'Body text here',
  }, function(err, message) {
   console.log(message.sid);
  });
}

module.exports = {
  sendText: sendText
}

我在text.js文件中引用index.js，该文件将包含所有脚本并充当Browserify的条目文件。

index.js

import sendText from './uploads/text.js';

浏览器化任务

import gulp         from 'gulp';
import gulpif       from 'gulp-if';
import gutil        from 'gulp-util';
import source       from 'vinyl-source-stream';
import streamify    from 'gulp-streamify';
import sourcemaps   from 'gulp-sourcemaps';
import rename       from 'gulp-rename';
import watchify     from 'watchify';
import browserify   from 'browserify';
import babelify     from 'babelify';
import uglify       from 'gulp-uglify';
import browserSync  from 'browser-sync';
import debowerify   from 'debowerify';
import handleErrors from '../util/handle-errors';
import config       from '../config';


function buildScript(file, watch) {

  // Takes a our specified index.js file as the entry point for compiling

  let bundler = browserify({
    entries: ['./src/assets/js/' + file],
    debug: false,
    cache: {},
    packageCache: {},
    fullPaths: global.isProd ? false : true
  });

  // Watch for changes in javascript

  if ( watch ) {
    bundler = watchify(bundler);
    bundler.on('update', rebundle);
  }

  // ES5 -> ES6

  bundler.transform(babelify);
  bundler.transform(debowerify);

  // Rebundle any changes appllied

  function rebundle() {
    const stream = bundler.bundle();

    gutil.log('Rebundle...');

    // Check for errors in stream + listen for production environment

    return stream.on('error', handleErrors)
    .pipe(source(file))
    .pipe(gulpif(global.isProd, streamify(uglify())))
    .pipe(streamify(rename({
      basename: 'main'
    })))
    .pipe(gulpif(!global.isProd, sourcemaps.write('./')))
    .pipe(gulp.dest(config.dest.js))
    .pipe(gulpif(browserSync.active, browserSync.reload({ stream: true, once: true })));
  }

  return rebundle();

}

gulp.task('browserify', function() {

  // Only run watchify if NOT production
  return buildScript('index.js', !global.isProd);

});

即使对于粘贴bin，粘贴输出代码太大，所以我不确定哪些信息可能有用，但我可以提供所需的任何内容。

为什么Browserify使我编译的Javascript文件的文件大小很大？

0 个答案: