为 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访问) 和.ts 文件被转译为同一文件夹中的.js 文件，所以我在同一个位置有.ts 和.js 文件，我不确定将它们移到哪里。

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

一般来说，我希望有两个文件夹 src 和 dist，其中需要传输和编译的所有内容都进入 dist，因此基本上有一个可以部署到生产服务器的应用程序。

附带说明：我目前正在将所有 sass 文件编译成一个大文件，其中样式应用于 id 或类等。我知道在 Angular 中有一个 styles 选项可以与template 类似，添加到@Component，我使用templateUrl 来定位相关的html 类，我可以为scss 文件做类似的事情还是更好地保留它，因为它不是css？

Answer 1

我认为你应该放弃对 npm 脚本 和 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;
  }
}

component.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();