我正在使用 Angular2 和 TypeScript 构建一个应用程序(大型)。它将需要分成许多项目,每个项目将有许多组件,每个组件都有一个 .html
View 、.css
样式表和 .ts
逻辑/类。
我希望每个项目都编译成单个 *.js
文件,并复制到将在 IIS 中运行的主机网站。这类似于使用 .xaml
文件构建 WPF 或 Silverlight 应用程序的方式,所有这些文件都被编译到 .dll
中。
我浏览了 Web 并能够使用 -- 将
选项。但这对 .ts
文件构建为单个 .js
文件 - outFile.html
文件或 css
没有帮助。
任何帮助将不胜感激,即使是说我所要求的是不可能的:-)
斯蒂芬
最佳答案
如果您使用默认的 Angular2 tsconfig.json
和 SystemJS loader :
"module": "system",
"moduleResolution": "node",
...
您可以将所有繁重的工作留给SystemJS Build Tool .这就是我在项目中使用 gulp
执行此操作的示例:
编译 *.ts 和内联 *.html 模板
我正在使用
gulp-angular-embed-templates
立即将所有templateUrl
内联到template
字符串中(此插件适用于 Angular 1.* 和 Angular 2)。var tsc = require('gulp-typescript'); var tsProject = tsc.createProject('tsconfig.json'); var embedTemplates = require('gulp-angular-embed-templates'); gulp.task('app.build', function () { var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'}) .pipe(embedTemplates()) // inline templates .pipe(tsc(tsProject)); return tsResult.js .pipe(gulp.dest('build/js')); });
这会产生很多anonymous System.register modules在
build/js
目录中。所有这些都已经内联了它们的templateUrl
。将所有内容捆绑到一个
.js
文件中我使用 SystemJS Build Tool为此,因为我认为它比使用例如 webpack 更容易。因此,我有另一个 gulp 任务来自动化这个过程:
var SystemBuilder = require('systemjs-builder'); gulp.task('app.systemjs.bundle', function () { var builder = new SystemBuilder('build/js, { paths: { '*': '*.js' }, meta: { 'angular2/*': { build: false }, 'rxjs/*': { build: false } } }); return builder.bundle('main', 'build/js/app.bundle.js'); });
构建器采用与 SystemJS 相同的选项所以检查他们的Config API .
调用
builder.bundle('main', ...)
搜索main.js
(这是我使用 Angular 的bootstrap
的初始脚本> 调用。这是您可以看到的同一个文件 in the 5 min quickstart ) 因为我将.js
附加到构建器搜索的所有路径。这是因为在 TS 中导入模块时,通常会调用:import {ModalResultComponent} from './modal-result.component';
它被编译为
./modal-result.component
依赖项,它不关心文件扩展名。这就是为什么我必须将*.js
添加到所有路径以帮助构建器找到所有已编译的 JavaScript 文件。meta
选项只是告诉构建器忽略我不想捆绑的依赖项。这是 Angular2 本身和rxjs
库,因为我在main.ts
中包含了import 'rxjs/add/operator/map'
。这会生成一个
app.bundle.js
文件,其中所有模块都使用 System.register 注册为命名模块。 .使用我们的
app.bundle.js
最后一部分是小菜一碟。我们只导入默认的 Angular2 东西然后使用
bundle
option告诉 SystemJS 我们所有的依赖项在哪里。<script> System.config({ packages: { '/web': { format: 'register', defaultExtension: 'js' } }, bundles: { '/web/app.bundle': ['main'] } }); System.import('main').then(null, console.error.bind(console)); </script>
当我们调用
System.import('main')
时,它实际上首先下载/web/app.bundle.js
并在包中注册所有模块,然后它使用我们的 Angular2 Bootstrap 导入模块main
。就是这样!
您实际上根本不需要使用 gulp
并使用纯 node
脚本完成所有操作。
使用 cssnano 之类的东西可以很容易地捆绑 CSS 文件我相信您到处都能找到有关如何使用它的教程。
我敢肯定还有其他方法可以解决同样的问题。 Angular2 旨在不限制您只能使用一种技术。但是,在我看来,使用 SystemJS 似乎是最简单的方法,因为它默认使用与 Angular2 相同的模块系统。
我确定您也可以使用例如 commonjs
格式,但这需要您还为 require()
加载器使用一些 polyfill,但我没有试过了。我相信UMD可能也值得一试。
关于angular - 将 Angular2 HTML 和 TypeScript 构建到单个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35867660/