对于Angular2项目,我如何连接从typescript生成的所有
JavaScript文件并将它们添加到我的index.html文件中.
我正在使用Angular2,typescript和gulp.
目前我没有连接它从typescript文件生成的javascript文件.
我无法尝试这样做并将它们添加到我的index.html文件中.
另外,一旦我完成了这个,我需要缓存清理,以便让浏览器保持请求javascript文件.
这是我的index.html文件：
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My App</title>
<base href="/"></base>
<Meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=0.5,user-scalable=yes"/>
<!-- Css libs -->
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!-- inject:css -->
<!-- <link rel="stylesheet" href="/css/styles.81dd14d5.css"> -->
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',defaultJSExtensions: true,typescriptOptions: {
emitDecoratorMetadata: true,},packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
}
});
</script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
<script type="text/javascript">
System.import('/app/app.component.js');
</script>
</body>
</html>
这是我的gulp文件：
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();
//1. Delete styles.css
gulp.task('deleteStyle',function() {
setTimeout(function () {
del.promise(['src/css/styles.*.css'])
.then(function() {
console.log("Deleted original styles.css");
return true;
});
},1000);
});
//2. Make new styles.css
gulp.task('addStyles',function() {
setTimeout(function () {
gulp.src('src/sass/styles.scss')
.pipe(sass().on('error',sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(cachebust.resources())
.pipe(gulp.dest('src/css/'))
console.log("Added and minifyCss style.css");
},3000);
});
//3. Inject new style.css to index.html file
gulp.task('injectStyle',function() {
setTimeout(function () {
var target = gulp.src('src/index.html');
var sources = gulp.src(['src/css/styles.*.css'],{read: false});
console.log("Injected stylesheet to index.html file");
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
},5000);
});
//Use for product release.
gulp.task('default',['deleteStyle','addStyles','injectStyle']);
这是我目前尝试使用缓存清除来连接js,现在工作正常.我只是不知道如何将这个all.46f5af42.js文件连接到index.html？
这是以下的gulp代码：
gulp.task('getAllJsFiles',function() {
setTimeout(function () {
gulp.src('src/app/**/**/*.js')
.pipe(concat('all.js'))
.pipe(cachebust.resources())
.pipe(gulp.dest('src/js'));
},8000);
});
我还设法将concat js和缓存的js文件缓存到index.html中：
<!-- inject:js --> <script src="/src/js/all.46f5af42.js"></script> <!-- endinject -->
我不知道如何将其连接起来以使其正常工作？
这是我目前的控制台：
如果有人可以帮助我将更改添加到我现有的代码中,那将是非常好的,因为我不想下载新的angular2种子应用程序,因为它会花费我很长时间来移动我的应用程序.
先感谢您.
解决方法
实际上,你不能像这样连接它们,因为默认情况下它们对应于匿名模块.您需要利用outFile来利用它.这样,所有模块都将编译成单个JS文件,它们不是匿名模块,而是通过名称注册.
这是一个例子.看一下System.register函数的第一个参数.
>匿名模块
System.register([ 'dep1','dep2',function(exports_1,context_1) {
(...)
}
System.register('module1',[ 'dep1',context_1) {
(...)
}
System.register('module2',context_1) {
(...)
}
以下是gulp文件中的使用示例：
gulp.task('app-bundle',function () {
var tsProject = ts.createProject('tsconfig.json',{
typescript: require('typescript'),outFile: 'app.js'
});
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
最后,您可以使用htmlreplace使用创建的JS文件更新脚本元素.这是样本：
gulp.task('html',function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js','app': 'app.min.js','boot': 'boot.min.js'
}))
.pipe(gulp.dest('dist'));
});
这个问题可以帮到你：
> How do I actually deploy an Angular 2 + Typescript + systemjs app?
