Aurelia 和 System.js 生产版本
Aurelia and System.js production build
我正在维护一个现有的 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>
经过大量的小调整,我解决了 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 项目,该项目显然不是使用 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>
经过大量的小调整,我解决了 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);
});