NG6 starter

NG6

使用Angular，ES6和WebPack构建可扩展应用程序的事实上的入门存储库

对于那些希望与Angular和ES6一起使用Gulp和WebPack进行构建过程的人，此存储库是那些希望与Angular和ES6进行奔跑的最小起动器。这种种子不是Yeoman的发电机。这是一个最小的起动器，其构建样板的任务。这些是它的特征：

• 目录/文件组织的最佳实践（允许无限水平应用缩放）
• 一个即时构建系统，用于与ES6合作
• 生成其他样板组件的任务
• 完整的测试系统
• 通过节点 – sass支撑

查看JSPM版本 – 作为ES6构建系统的WebPack的替代品。

如果您正在寻找初步的Angular 2构建，请使用Angular2-Webpack-Starter。

目录

• 演练
  • 构建系统
  • 文件结构
  • 测试设置
• 入门
  • 依赖性
  • 安装
  • 运行该应用程序
    • 大量任务
    • 测试
    • 生成组件
• 入门套件支持和问题

演练

构建系统

NG6将NPM脚本，Gulp和WebPack一起用于其构建系统。是的，如果您使用的是WebPack，则不需要毛。如果您的构建系统仅负责文件操作，这是正确的。但是，我们的不是。

Webpack处理所有与文件有关的问题：

• 用Babel从ES6转到ES5
• 将HTML文件加载为模块
• 将样式表和将其附加到DOM
• 刷新浏览器并重建文件更改
• 热模块替换用于转移样式表
• 捆绑该应用程序
• 加载所有模块
• 为*.spec.js文件执行以上所有操作

Gulp是编排者：

• 启动和调用WebPack
• 启动开发服务器（是的，WebPack也可以执行此操作）
• 为角应用生成样板

查看JSPM版本 – 作为ES6构建系统的WebPack的替代品。

文件结构

我们使用NG6的组件方法。这将是最终的标准（如果使用Angular的新路由器），也是确保在成熟时间时向Angular 2过渡的好方法。一切 – 或大多数所有东西，正如我们将探讨的那样（下） – 是一个组件。组件是一个独立的关注点 – 可能是UI的功能或严格定义的，持续的元素（例如标头，侧边栏或页脚）。组件的特征也是它利用自己的样式表，模板，控制器，路由，服务和规格。这种封装使我们可以舒适地隔离和结构性区域。它的外观：

 client
⋅⋅app/
⋅⋅⋅⋅app.js * app entry file
⋅⋅⋅⋅app.html * app template
⋅⋅⋅⋅common/ * functionality pertinent to several components propagate into this directory
⋅⋅⋅⋅components/ * where components live
⋅⋅⋅⋅⋅⋅components.js * components entry file
⋅⋅⋅⋅⋅⋅home/ * home component
⋅⋅⋅⋅⋅⋅⋅⋅home.js * home entry file (routes, configurations, and declarations occur here)
⋅⋅⋅⋅⋅⋅⋅⋅home.component.js * home \"directive\"
⋅⋅⋅⋅⋅⋅⋅⋅home.controller.js * home controller
⋅⋅⋅⋅⋅⋅⋅⋅home.scss * home styles
⋅⋅⋅⋅⋅⋅⋅⋅home.html * home template
⋅⋅⋅⋅⋅⋅⋅⋅home.spec.js * home specs (for entry, component, and controller)

测试设置

所有测试也用ES6编写。我们使用WebPack来照顾将这些文件在各种浏览器中运行的物流，就像我们的客户端文件一样。这是我们的测试堆栈：

• 业力
• webpack + babel
• 摩卡
• 柴

要运行测试，请在终端中键入npm test 。在下面了解有关测试的更多信息。

入门

依赖性

运行此应用所需的工具：

• node和npm

安装

• fork这个存储库
• clone你的叉子
• npm install以安装依赖关系

运行该应用程序

NG6使用Gulp来构建和启动开发环境。安装所有依赖项后，您可以运行该应用程序。运行npm start将将应用程序与webpack捆绑在一起，启动开发服务器并观看所有文件。该端口将显示在终端中。

任务

这是可用任务的列表：

• npm run build
  • 运行WebPack，它将将所有资产和模块转换为dist/bundle.js 。它还准备index.html 。
• npm run serve
  • 通过webpack-dev-server启动DEV服务器，为客户端文件夹服务。
• npm run watch
  • serve的别名
• npm start （这是在键入gulp时运行的默认任务，而无需提供参数）
  • serve 。
• npm run component
  • 脚手架是一个新的角部分。请阅读以下内容以获取使用详细信息。

测试

要运行测试，请运行npm test 。

Karma与WebPack结合使用，在app文件夹中运行所有匹配*.spec.js的文件。这使我们能够将测试文件保持在该组件的本地化 – 这使我们真诚地保持了模块化构建应用程序。文件spec.bundle.js是业力将运行的所有规格文件的捆绑文件。

确保在其相应的组件目录中定义您的*.spec.js文件。您必须将规格文件命名为[name].spec.js 。如果您不想使用.spec.js后缀，则必须更改spec.bundle.js中的regex以查找所需的任何文件。 Mocha是测试套件， Chai是断言库。如果您想更改此信息，请参见karma.conf.js 。

例子

如果您有示例，学习一些东西总是更容易的。这是基于此入门者的存储库列表：

• todomvc示例应用程序

生成组件

遵循组件之间的一致目录结构为我们提供了可预测性的确定性。我们可以通过创建一项Gulp任务来自动化组件的“实例化”来利用这种确定性。组件样板任务生成以下方式：

 ⋅⋅⋅⋅⋅⋅componentName/
⋅⋅⋅⋅⋅⋅⋅⋅componentName.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.controller.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.html
⋅⋅⋅⋅⋅⋅⋅⋅componentName.scss // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅componentName.spec.js // contains passing demonstration tests

当然，您可能会手动创建这些文件，每次需要一个新模块时，但这很快就会变得乏味。要生成组件，请运行npm run component -- --name componentName 。

以下的参数--name标志是要创建的组件的名称。确保它是唯一的，或者将覆盖先前存在的相同命名组件。

默认情况下，将创建组件内部client/app/components 。要更改此操作，请应用--parent标志，然后是相对于client/app/components/路径。

例如，运行npm run component -- --name signup --parent auth将在client/app/components/auth/signup中创建一个signup组件。

运行npm run component -- --name footer --parent ../common在client/app/common/footer上创建footer组件。

因为--name的参数适用于文件夹名称和实际组件名称，请确保将组件名称置换。

入门套件支持和问题

随时与我们联系，以了解有关此项目的任何内容。

• Gitter：AngularClass/NG6-Starter
• Twitter：@patrickjs__

享受 –帕特里克斯