Question

所以我一直在角度2开发一段时间了，我想知道它的构建过程是什么以及如何实现它？

目前我的项目结构方式如下

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时，以一种很好的方式（此时我和＃ 39; m使用gulp将这些文件编译成index.htlm访问的构建文件夹）和.ts文件被转换为同一文件夹中的.js文件，因此我同时拥有.ts和{ {1}}文件在同一个地方，我不知道在哪里移动这些文件。

当我查看控制台时，我看到消息说角度2处于开发者模式，所以我假设有生产模式？如何利用这一点。

一般情况下，我希望有两个文件夹.js和src，其中需要发送和编译的所有文件都进入dist，因此基本上有一个可以部署到生产服务器的应用程序

作为旁注：我目前正在将所有sass文件编译成一个大文件，其中样式应用于id或类等。我知道角度有一个{{可以与dist类似地添加到styles的选项，我使用@Component代替相关的html类，我可以为scss文件执行类似操作，或者更好地保留它因为它不是css？

Answer 1

我认为你应该放弃 npm脚本和 webpack 。不要误会我的意思，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的工作，并且它是在节点中构建的！

最近我创建了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，它基本上意味着角度变化检测不会运行两次。你可以通过以下方式打开它：

import {enableProdMode} from 'angular2/core';

enableProdMode();

为角度2应用构建流程逻辑

1 个答案: