使用 npm 和 Browserify 通过一个命令创建多个包

Question

我正在尝试使用单个构建命令创建两个 bundle.js 文件，一个用于 iOS，一个用于 Android。我想在捆绑包中包含第二个应用程序，但作为别名导入并让 Browserify 确定来源。我不想修改 App.js 但我想我可以为 appOne 导入设置别名，它会导入空白字符串或应用程序。

这是我目前拥有的所有内容：

Package.json

...

 "scripts": {
    "build-dev": "NODE_ENV=production browserify appone-ios.js app.js > public/js/bundle-ios.js && cp public/js/bundle-ios.js public/js/bundle-ios.min.js | NODE_ENV=production browserify appone-andoird.js app.js > public/js/bundle-android.js && cp public/js/bundle-android.js public/js/bundle-android.min.js",
  },

...

阿彭-ios.js

// default placeholder for import.
var appOne = '';
export default appOne;

阿彭-android.js

// app for import.
var appOne = require('path/to/app/one');
export default appOne;

App.js

// Always import AppOne either a blank string or app so that app.js doesnt change.
var appOne = import('appOne');

Answer 1

我最终不得不使用 Gulp。除了 'watch' 不工作之外，这是完整的。

var gulp = require('gulp');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var transform = require('vinyl-source-stream');
var browserify = require('browserify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');

var ios = browserify({
   entries:['app.js']
 });

var android = browserify({
  entries:['app.js']
});

const bundle = () => {

  process.env.NODE_ENV = 'production';

  const bundleIOS = () => {
    ios.require('./app-ios.js', {expose:'app_alias'})
      .bundle()
      .pipe(transform('bundle-ios.js'))
      .pipe(gulp.dest('./public/js'))
      .pipe(streamify(uglify()))
      .pipe(rename('bundle-ios.min.js'))
      .pipe(gulp.dest('./public/js'));
      return ios;
  }

  const bundleAndroid = () => {
    android.require('./app-android.js', {expose:'app_alias'})
      .bundle()
      .pipe(transform('bundle-android.js'))
      .pipe(gulp.dest('./public/js'))
      .pipe(streamify(uglify()))
      .pipe(rename('bundle-android.min.js'))
      .pipe(gulp.dest('./public/js'));
      return android;
  }

  return bundleIOS() && bundleAndroid();

}

const start = () => {
  return nodemon({
    script: 'server.js',
    watch: ['server.js', 'public/js/*', 'public/index.html', 'public/css/*'],
    ext: 'js html css',
    env: { 'NODE_ENV': 'development' },
  });
}

// Start local server and watch bundles.
gulp.task('start', start);

// Build minified versions for prod.
gulp.task('deploy', bundle);

使用 npm 和 Browserify 通过一个命令创建多个包

Created multiple bundles with one command using npm and Browserify

npm

browserify