Question

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

这是我到目前为止所包含的所有内容：

的package.json

...

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component { id: btn; Rectangle { width : 100; height : 100; color : "red" } }

    Column {
        spacing: 10
        Loader { sourceComponent: btn }
        Loader { sourceComponent: btn; width: 300 }
        Loader { sourceComponent: btn; width: 1000 }
    }
}

...

Appone-ios.js

 "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",
  },

Appone-android.js

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

App.js

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

Answer 1

我最终不得不使用Gulp。除了“手表”不起作用外，这是完整的。

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使用一个命令创建多个包

1 个答案: