如何（缩小）汇编的角2组件组合？ [英] How to combine (minify) compiled Angular 2 components?
问题描述
努力来缩小项目的源代码编译code生产，
我使用咕嘟咕嘟作为任务亚军。
trying to minify compiled source code of a project for production, I'm using Gulp as the task runner.
源文件看起来像这样，
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>
我的应用程序的目录结构如下，
my app directory structure is as follows,
.
├── main.js
├── main.js.map
├── main.ts
├── main.app.js
├── main.app.js.map
├── main.app.ts
├── x.component1
│ ├── x.component.one.js
│ ├── x.component.one.js.map
│ └── x.component.one.ts
└── x.component2
├── x.component.two.js
├── x.component.two.js.map
└── x.component.two.ts
应用/ main.ts
import {bootstrap} from 'angular2/platform/browser';
import {MyAwesomeApp} from './main.app'
bootstrap(MyAwesomeApp);
main.app.ts
main.app.ts
@Component({
selector: 'app',
template: `
<component-1></component-1>
<component-2></component-2>
`,
directives: [Component1, Component2]
})
export class MyAwesomeApp {
}
然后是组件，
@Component({
selector: 'component-1',
template: `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
`
})
export class Component1 {
}
和
@Component({
selector: 'component-2',
template: `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
`
})
export class Component2 {
}
所有打字稿文件被编译成JavaScript的ES5，进一步需要精缩到 main.js
所以我的问题是，
- 我可以运行一个任务来收集所有的编译
的.js文件来缩小到一个单一的文件，并引用为主生产分支？ - 这是否打破了模块系统导入{X}从'Y'？
- 如果它打破了模块加载系统，可以做些什么来连接上的角2应用程序文件？
- Can I run a task to collect all the compiled
.jsfiles to minify to a single file and reference it asmainin production branch? - Does this breaks the module system import {x} from 'y'?
- If it breaks the module loading system, what can be done to concatenate files on an Angular 2 application?
我的打字稿的版本是， 1.8.2
my TypeScript version is, 1.8.2
感谢您的任何帮助。
推荐答案
如果您想将所有的打字稿文件编译成一个单一的一个，你需要使用不过outFile 打字稿编译器的性能。它的配置通过一饮而尽，打字稿插件。
If you want to compile all your TypeScript files into a single one, you need to use the outFile property of the TypeScript compiler. It's configurable through the gulp-typescript plugin.
这样，您就不需要配置SystemJS加载模块基于文件名：
This way you don't need to configure SystemJS to load module based on file names:
<script>
// Not necessary anymore
/* System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
}); */
System.import('app/main')
.then(null, console.error.bind(console));
</script>
模块名称及其内容，现在美元这个单一的文件p $ psent。对于Angular2分布的打包捆扎文件的方式（ angular2.dev.js ， http.dev.js ，...）。要使用这个文件，只需将其包含在剧本元素。
The module names and their contents are now present in this single file. The same way for the packaged bundle files of the Angular2 distribution (angular2.dev.js, http.dev.js, ...). To use this file, simply include it in a script element.
这样你就不会打破模块导入。
This way you won't break module imports.
然后你可以再缩小这个单一文件，大口的丑化插件...
Then you can minify this single file with the uglify plugin of gulp...
这篇关于如何（缩小）汇编的角2组件组合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
