angular - 为 Angular 应用程序构建流程逻辑

Question

我已经用 Angular 进行开发有一段时间了，我想知道什么是一个好的构建过程以及如何实现它？

目前我的项目结构如下

app
  compontents
    component-one
      component-one.ts
      component-one.html
      component-one.scss
  services
  typings
  pages
    page-one
      page-one.ts
      page-one.html
      page-one.scss
  app.ts (contains bootstrap)
build
index.html

我看到很多人使用 src 文件夹而不是 app，并且有 dist 文件夹用于我认为是应用程序的构建，因此我想知道我的下一步是什么来实现这一点，当我将所有文件(如 .ts 或 .scss 编译为 .js 时) 和 .css 分别以一种很好的方式(目前我正在使用 gulp 将它们编译到 index.htlm 访问的构建文件夹中)和 .ts 文件被转换为同一文件夹中的 .js 文件，因此我在同一位置同时拥有 .ts 和 .js 文件，我不确定将这些移动到哪里。

此外，当我查看控制台时，我看到消息说 Angular 处于开发人员模式，所以我认为存在生产模式？如何利用这一点。

一般来说，我想要两个文件夹 src 和 dist，其中需要运行和编译的所有内容都放入 dist 中，因此本质上有一个那里的应用程序可以部署到生产服务器。

作为旁注:我目前正在将所有 sass 文件编译成一个大文件，其中样式应用于 id 或类等。我知道在 Angular 中有一个 styles 选项可以添加到 @Component 中，类似于 template，我使用 templateUrl 来代替目标相关的 html 类，我可以做些什么吗与 scss 文件类似，或者最好保留它，因为它不是 css？

Answer 1

我认为你应该放弃 npm script 和 webpack 的 gulp。不要误会我的意思，Gulp 是一个很棒的工具，但是对于比简单网站更复杂的项目，处理 js/css 的所有构建步骤、设置 live-realod/browsersync(取决于多个插件)确实很痛苦，更不用说生产任务和测试了。

Webpack 好多了，它可以为您处理捆绑、源映射、转译、开发服务器、实时重新加载，速度极快，并且具有 amazing documentation 。如果您希望将组件的样式和模板放在单独的文件中，webpack 也会处理这个问题!

template.html

<h1>Hello world!</h1>

style.scss

$world: "World";

.someClass {
  &::after {
    content: "Hello " + $world;
  }
}

组件.ts

@Component({
  template: require('./template.html'),
  styles: [ require("!css!sass!./style.scss"); ]
})

作为捆绑结果，您将获得::

// bundle.js
@Component({
  template: '<h1>Hello world!</h1>',
  styles: [ '.someClass::after { content: "Hello World"; }' ]
})

Npm 脚本允许您轻松运行本地安装的 npm 模块，例如 rimraf、karma 或 webpack。它基本上完成了 gulp 的工作，并且是内置于 Node 中的!

---

最近我创建了my own little project with webpack您可能会发现这很有用。

这里列出了一些令人惊叹的存储库和文章:

• angular2 started by AngularClass - 很棒的入门，有你需要的一切，但对于初学者来说有点不知所措
• ng2-webpack-play by pkozlowski - 非常简单的例子，没什么花哨的，易于理解和学习
• bootstrap in webpack - 第三方库(如 jQuery 或 bootstrap)也可以很好地适应此设置
• and if you are still not convinced about leaving gulp behind - 这篇文章应该可以做到

---

关于the production mode ，这基本上意味着 Angular 的变化检测不会运行两次。您可以通过以下方式打开它:

import {enableProdMode} from 'angular2/core';

enableProdMode();