Aurelia 和 System.js 生产版本

Question

我正在维护一个现有的 Aurelia 项目，该项目显然不是使用 Aurelia CLI 创建的。

我需要创建一个 生产版本 但我无法使用当前配置。开发构建工作正常，但正如预期的那样，将大量代码下载到用户机器上。

在运行 gulp prod（下面列出的 gulpfile）之后，我得到了两个 JS 文件：app-build-{revnumber}.js 和 vendor-build-{revnumber}.js，但是 Aurelia 一直试图加载 main.js 文件.

我尝试一起构建 main.js（在 gulpfile.js 中注释代码），但没有成功 - 仅加载了供应商包：

这是我的配置文件：

config.js

System.config({
  baseURL: "/www",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "stage": 0,
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "*": "src/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },
  map: { /* mappings */ }
});

gulpfile.js

var gulp = require('gulp');
var bundler = require('aurelia-bundler');
var image = image = require('gulp-image');
var replace = require('gulp-replace');
var gulpsync = require('gulp-sync')(gulp);

var config = {
  force: true,
  baseURL: '.',
  configPath: './config.js',
  bundles: {
    // "dist/main": {
    //   includes: [
    //     '[main.js]'
    //   ],
    //   options: {
    //     inject: true,
    //     minify: false,
    //     rev: false
    //   }
    // },
    "dist/app-build": {
      includes: [
        '[**/*.js]',
        '**/*.html!text',
        '**/*.css!text'
      ],
      options: {
        inject: true,
        minify: true,
        rev: true
      }
    },
    "dist/vendor-build": {
      includes: [ /* all external modules */ ],
      options: {
        inject: true,
        minify: true,
        rev: true
      }
    }
  }
};

gulp.task("bundle", function () {
  return bundler.bundle(config)
    .then(function () {
      gulp.src('config.js')
        .pipe(replace('dist/', ''))
        .pipe(replace('src', 'dist'))
        .pipe(gulp.dest(''));
    });
});

gulp.task("unbundle",
  function () {
    return bundler.unbundle(config)
      .then(function () {
        gulp.src('config.js')
          .pipe(replace('dist', 'src'))
          .pipe(gulp.dest(''));
      });
  });

gulp.task("image-bundle",
  function () {
    gulp.src('./src/media/*')
      .pipe(image())
      .pipe(gulp.dest('./dist/media'));
  });

gulp.task("files-bundle", function () {
  return gulp
    .src('./src/style/material.woff2')
    .pipe(gulp.dest('./dist/style'));
});

gulp.task('prod', gulpsync.sync(['unbundle', 'bundle', 'image-bundle', 'files-bundle']));

gulp.task('dev', gulpsync.sync(['unbundle']));

index.html

<!DOCTYPE html>
<html>
<head>...</head>
<body aurelia-app="main">
    <script src="www/jspm_packages/system.js"></script>
    <script src="www/config.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
</body>
</html>

Answer 1

经过大量的小调整，我解决了 main.js 问题。

似乎 System.js 在捆绑包中寻找依赖项，如果找不到，它就会访问网络。这是我修复捆绑包所做的工作：

合并 dist/ 文件夹作为捆绑源

在config.js中，将*的路径设置为dist/*，不要在任何Gulp任务中修改。
在捆绑任务运行之前，我将所有内容从 src/ 复制到 dist/
在 dist/app-build 包中，我添加了选项 depCache: true。它在 false 时不起作用（给出 main.js not found 的错误），但我真的不知道为什么。

added/modifiedGulp任务：

// deletes all files in the output path
gulp.task('clean', ['unbundle'], function () {
  return gulp.src(['dist/'])
    .pipe(vinylPaths(del));
});

gulp.task('copy', function () {
  return gulp.src(['src/**/*'])
    .pipe(gulpCopy('dist/', { prefix: 1 }));
});

gulp.task("bundle", sync(['clean', 'copy']), function () {
  return bundler.bundle(config);
});

gulp.task("unbundle", function () {
  return bundler.unbundle(config);
});

Aurelia 和 System.js 生产版本

Aurelia and System.js production build

javascript

aurelia

systemjs