构建角度应用的过程逻辑

Question

因此，我已经开发了很长一段时间，我想知道什么是一个很好的构建过程，以及我如何实现它？

目前，我的项目结构如下

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文件放在同一个地方，我不知道在哪里移动这些文件。

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

通常，我希望有两个文件夹-- src和dist --在这两个文件夹中，所有需要发生和编译的东西都会进入dist，因此实际上有一个应用程序可以部署到生产服务器上。

作为附带说明：我目前正在编译所有sass文件为一个大文件，其中的样式应用于id或类等。我知道在角度上有一个styles选项可以添加到@Component中，类似于template，我正在使用templateUrl来针对相关的html类，我可以对scss文件做一些类似的操作吗，或者最好还是保留它，因为它不是css？

Answer 1

我认为你应该放弃的npm剧本和webpack。不要误解我，Gulp是一个很好的工具，但是对于比简单网站更复杂的项目，处理js/css的所有构建步骤、建立实时/浏览器同步(取决于多个插件)都是很痛苦的，更不用说生产任务和测试了。

Webpack是如此的好，它为您处理捆绑，源地图，传输，开发服务器，直播重新加载，它的照明速度快，并有惊人的文档。如果您喜欢组件的样式和模板在单独的文件，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、业力或webpack。它基本完成了吞咽的工作，它是建立在节点上的！

最近，我创建了我和webpack的小项目，您可能会发现它很有用。

下面列出了一些令人惊讶的回复和文章：

• angular2由AngularClass启动 --神奇的初学者，拥有你所需要的一切，但是对于乞丐来说有点难以承受。
• Ng2-webpack- pkozlowski演奏 -非常直截了当的例子，没有什么花哨，容易理解和学习。
• webpack的鞋带 -第三方库(如jQuery或引导程序)也可以很好地使用这个设置。
• 如果你还不相信留下一口 -本文应该这样做

对于生产模式，它的基本意思是角的变化检测不会运行两次。你可以通过以下方式打开它：

import {enableProdMode} from 'angular2/core';

enableProdMode();