Javascript 如何组合（缩小）已编译的 Angular 2 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35811126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to combine (minify) compiled Angular 2 components?
提问by Rivadiz
trying to minify compiled source code of a project for production, I'm using Gulp as the task runner.
试图缩小生产项目的编译源代码，我使用 Gulp 作为任务运行器。
the source files look like this,
源文件看起来像这样，
html
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
app/main.ts
应用程序/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 {
}
then the components,
然后是组件，
@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 {
}
and
和
@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 {
}
All the TypeScript files are compiled down to ES5 JavaScript, further need to minified to main.js
所有的 TypeScript 文件都编译成 ES5 JavaScript，进一步需要缩小到 main.js
so my questions are,
所以我的问题是，
- 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?
- 我可以运行一个任务来收集所有编译的
.js文件以缩小到单个文件并main在生产分支中引用它吗？ - 这是否会破坏模块系统 import {x} from 'y' ？
- 如果它破坏了模块加载系统，可以做些什么来连接 Angular 2 应用程序上的文件？
my TypeScript version is, 1.8.2
我的打字稿版本是， 1.8.2
Thank you for any help.
感谢您的任何帮助。
回答by Thierry Templier
If you want to compile all your TypeScript files into a single one, you need to use the outFileproperty of the TypeScript compiler. It's configurable through the gulp-typescript plugin.
如果要将所有 TypeScript 文件编译为一个，则需要使用outFileTypeScript 编译器的属性。它可以通过 gulp-typescript 插件进行配置。
This way you don't need to configure SystemJS to load module based on file names:
这样你就不需要配置 SystemJS 来根据文件名加载模块：
<script>
// Not necessary anymore
/* System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
}); */
System.import('app/main')
.then(null, console.error.bind(console));
</script>
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 scriptelement.
模块名称及其内容现在出现在这个单个文件中。Angular2 发行版 ( angular2.dev.js, http.dev.js, ...)的打包包文件的方式相同。要使用这个文件，只需将它包含在一个script元素中。
This way you won't break module imports.
这样你就不会破坏模块导入。
Then you can minify this single file with the uglify plugin of gulp...
然后你可以使用 gulp 的 uglify 插件缩小这个单个文件......
回答by Gary
** Create a single file from TS with options in tsconfig.json.
** 使用 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.
** Build the output file and include as follows: Example:
** 构建输出文件并包含如下内容： 示例：
<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>
** Minify the all.js file as you do normally.
** 像往常一样缩小 all.js 文件。
回答by All ?? Vаи?тy
If you are using @angular/cliyou can run
如果你正在使用@angular/cli你可以运行
ng build --prod
to minify and gzip the code.
缩小和gzip代码。
回答by carnun
Since you are already using Gulp you can just add webpackin your gulp task to combine all your JavaScript source files (as well as Angular2 sources) into one. Here's a sample of what your webpack.config.jscould look like:
由于您已经在使用 Gulp，因此您只需在gulp任务中添加webpack即可将所有 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/
}]
}
};
The relevant sections from your gulpfile.jsare
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/'));
});
Replace gulp.dest('src/')with the relevant location that you want your production code to reside in.
替换gulp.dest('src/')为您希望生产代码所在的相关位置。
You then need to process your HTML files to have the appropriate JavaScript source file references (also in gulpfile.js).
然后，您需要处理 HTML 文件以获得适当的 JavaScript 源文件引用（也在gulpfile.js 中）。
gulp.task('html', ['templates'], function() {
return gulp.src('src/index.html')
.pipe(htmlReplace({
'js': ['bundle.js']
}))
.pipe(gulp.dest('dist/'));
});
If you want to minify your JavaScript files you can use UglifyJS2. (Note however that there is something that goes wrong with obfuscation, hence the mangle: false. See this SO linkfor more). Here's the relevant gulpfile.jscontent:
如果你想缩小你的 JavaScript 文件，你可以使用UglifyJS2。（但请注意，混淆会出现问题，因此mangle: false. 请参阅此SO 链接了解更多信息）。这是相关的gulpfile.js内容：
gulp.task('js', ['webpack'], function() {
return gulp.src('src/bundle.js')
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest('dist/'));
});
In this way your production code ends up in your distfolder from where you can deploy it. Now it's your choice whether you check that into a production branch or not.
通过这种方式，您的生产代码最终会保存dist在您可以部署它的文件夹中。现在，您可以选择是否将其签入生产分支。
Feel free to refer to my words project on Githubif you want to see a working version on a very small Angular2 app.
如果您想在一个非常小的 Angular2 应用程序上查看工作版本，请随时参考我在 Github 上的文字项目。
