Javascript 如何组合（缩小）已编译的Angular 2组件？_Javascript_Angular_Minify

Javascript 如何组合（缩小）已编译的Angular 2组件？

javascript angular

Javascript 如何组合（缩小）已编译的Angular 2组件？,javascript,angular,minify,Javascript,Angular,Minify,试图缩小生产项目的编译源代码，我使用Gulp作为任务执行者源文件如下所示 html  <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js">

试图缩小生产项目的编译源代码，我使用Gulp作为任务执行者

源文件如下所示

html

<!--... . .  various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>
<body>
  <app></app>
</body>

app/main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {MyAwesomeApp} from './main.app'

bootstrap(MyAwesomeApp);

main.app.ts

@Component({
    selector: 'app',
    template: `
        <component-1></component-1>

        <component-2></component-2>
    `,
    directives: [Component1, Component2]
})


export class MyAwesomeApp {

}

及

所有的TypeScript文件都编译成ES5JavaScript，还需要进一步缩小到

main.js

所以我的问题是

我是否可以运行一个任务来收集所有编译的

.js

文件，以缩小为单个文件，并将其作为生产分支中的

main

引用

这是否会从“y”中断模块系统导入{x}

如果它破坏了模块加载系统，那么如何在Angular 2应用程序上连接文件

我的打字脚本版本是，

1.8.2

谢谢您的帮助。

如果您想将所有的TypeScript文件编译成一个文件，您需要使用TypeScript编译器的

outFile

属性。它可以通过GulpTypeScript插件进行配置

这样，您就不需要配置SystemJS来根据文件名加载模块：

<script>
  // Not necessary anymore
  /* System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  }); */
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>


//不再需要了
/*System.config({
包：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
}
}); */
System.import（'app/main'）
.then（null，console.error.bind（console））；

模块名称及其内容现在显示在这个文件中。对于Angular2发行版的打包包文件也是如此（

Angular2.dev.js

，

http.dev.js

，…）。要使用此文件，只需将其包含在

脚本

元素中即可

这样就不会破坏模块导入

然后你可以用gulp的丑陋插件缩小这个文件…

因为你已经在使用gulp了，你只需在gulp任务中添加，就可以将所有JavaScript源文件（以及Angular2源文件）合并成一个。下面是您的webpack.config.js的示例：

module.exports = {
  entry: './src/app/app',
  output: {
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

您的gulpfile.js中的相关部分如下

var webpack = require('webpack-stream');
var htmlReplace = require('gulp-html-replace');
var gulp = require('gulp');

gulp.task('webpack', function() {
  return gulp.src('src/app/*.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

将

gulp.dest（'src/'）

替换为您希望生产代码驻留的相关位置

然后，您需要处理HTML文件以获得适当的JavaScript源文件引用（也在gulpfile.js中）

如果你想缩小你的JavaScript文件，你可以使用。（但是请注意，模糊处理有一些问题，因此出现了

mangle:false

。有关更多信息，请参见此）。以下是相关的gulpfile.js内容：

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify({
            mangle: false
          }))
    .pipe(gulp.dest('dist/'));
});

这样，您的生产代码就被保存在

dist

文件夹中，您可以在那里部署它。现在，您可以选择是否将其签入生产分支

如果您想在一个非常小的Angular2应用程序上看到一个工作版本，请随时参考my。

**使用tsconfig.json中的选项从TS创建一个文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir":"client/build/",
    "outFile": "client/build/all.js",
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "server"
  ],
  "include": [
        "client/*.ts",
        "client/**/*.ts",
        "client/**/**/*.ts"
  ]   
}

// Include all folders to put to a file.

**构建输出文件并包括以下内容：例如：


//另一种方法是在all.js中编译，并使用以下系统配置将所有模块添加到bundle中。
//build/all.js上的bundle包含这些模块
System.config({
捆绑包：{
'client/build/all.js'：['boot'、'components/all/present'、'components/main/main'、'components/register/register'、'components/login/login'、'components/home/home'、'services/userdetails'、'services/httpprovider']
}
});
//当我们加载“app/app”时，捆绑扩展会中断加载过程
//并确保首先加载build/all.js的引导
System.import（'boot'）；

**按正常操作缩小all.js文件。

如果使用@angular/cli
，则可以运行

ng build --prod

缩小和gzip代码。

这在我看来不起作用。如果我做了

System.import（'app/main'）

它会说找不到文件。。如果我执行

System.import（'app/main.js）

操作，它会加载文件，但不会启动任何函数。我可能在这里遗漏了一些东西..你是否将js文件包含到

脚本元素中？是的，我有这个<代码>
，然后是..中的所有脚本。。在它前面的“库”部分下。因此，
是我在系统之前的最后一个。导入现在似乎已经添加了缩小@ThierryTemplier和我用Outile做的一样，但是当我用gulp的时候它不工作了，请你看一下，这看起来是缩小了。对我来说，将增加的文件数量减少近50%：（没有其他解决方案吗？
gulp.task('html', ['templates'], function() {
  return gulp.src('src/index.html')
    .pipe(htmlReplace({
      'js': ['bundle.js']
    }))
    .pipe(gulp.dest('dist/'));
});

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify({
            mangle: false
          }))
    .pipe(gulp.dest('dist/'));
});

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir":"client/build/",
    "outFile": "client/build/all.js",
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "server"
  ],
  "include": [
        "client/*.ts",
        "client/**/*.ts",
        "client/**/**/*.ts"
  ]   
}

// Include all folders to put to a file.

<script>


  // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles.
  // the bundle at build/all.js contains these modules
System.config({
    bundles: {
      'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider']
    }
  });

  // when we load 'app/app' the bundle extension interrupts the loading process
  // and ensures that boot of build/all.js is loaded first
  System.import('boot');


    </script>

ng build --prod