对于Angular2项目,我如何连接从typescript生成的所有JavaScript

发布时间：2020-12-17 17:41:44 所属栏目：安全来源：网络整理

导读：对于Angular2项目,我如何连接从typescript生成的所有 JavaScript文件并将它们添加到我的index.html文件中. 我正在使用Angular2,typescript和gulp. 目前我没有连接它从typescript文件生成的javascript文件. 我无法尝试这样做并将它们添加到我的index.html文件

对于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 -->

我不知道如何将其连接起来以使其正常工作？

这是我目前的控制台：

enter image description here

如果有人可以帮助我将更改添加到我现有的代码中,那将是非常好的,因为我不想下载新的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?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!