试图缩小生产项目的编译源代码， 我使用 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.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
app/main.ts
import {bootstrap} from 'angular2/platform/browser';
import {MyAwesomeApp} from './main.app'
bootstrap(MyAwesomeApp);
主程序.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 {
}
所有的 TypeScript 文件都被编译成 ES5 JavaScript，进一步需要压缩成 main.js
所以我的问题是，
- 我可以运行一个任务来收集所有已编译的
.js文件以缩小为单个文件并在生产分支中将其作为main引用吗？ - 这会破坏模块系统 import {x} from 'y' 吗？
- 如果它破坏了模块加载系统，如何在 Angular 2 应用程序上连接文件？
我的 TypeScript 版本是 1.8.2
感谢您的帮助。
最佳答案
如果您想将所有 TypeScript 文件编译成一个文件，您需要使用 TypeScript 编译器的 outFile 属性。它可以通过 gulp-typescript 插件进行配置。
这样你就不需要配置 SystemJS 来根据文件名加载模块:
<script>
// Not necessary anymore
/* System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
}); */
System.import('app/main')
.then(null, console.error.bind(console));
</script>
模块名称及其内容现在都存在于这个文件中。 Angular2 发行版的打包包文件(angular2.dev.js、http.dev.js、...)也是如此。要使用此文件，只需将其包含在 script 元素中即可。
这样你就不会破坏模块导入。
然后你可以使用 gulp 的 uglify 插件缩小这个单个文件...
关于javascript - 如何组合(缩小)已编译的 Angular 2 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35811126/