@abcnews/aunty 中文文档教程

Question

@abcnews/aunty

用于处理 ABC 新闻项目的工具包

Installation

要使用 CLI 创建新项目，请在全局安装最新的 aunty 版本：

npm install --global @abcnews/aunty

基于 aunty 项目模板的项目已经将 aunty 列为本地依赖项，锁定到用于创建它的版本。

Usage

有关使用说明，请运行不带参数的 aunty，或有关特定命令的详细信息，请运行：

aunty help <command>

CLI 包含四种类型的命令，按用途分组：

• Creating new projects (new, init)
• Generating stuff (generate) like components
• Developing projects (clean, build, serve, test)
• Deploying (un)versioned projects (deploy, release)

Starting projects

创建新项目时，您应该使用全局 < strong>aunty：

/some/parent/directory $ aunty new

或者，从一个（最好是空的）目录中：

/some/parent/directory/my-project $ aunty init

Developing projects

在安装了 aunty 依赖项的项目目录中工作时，您将自动运行该本地 aunty：

/some/parent/directory/my-project $ aunty <build|serve|...> [options]

这确保对未来版本的阿姨的任何更改都不会影响您的项目，并且您可以在准备好适应这些更改时手动更新本地阿姨。

项目级命令可以使用可选配置，您可以从项目级 aunty.config.js 文件中导出：

module.exports = {
  type: '<project_type>',
  // aunty command configuration
  build: {…},
  serve: {…},
  deploy: {…},
  // internal tools configuration
  babel: {…},
  jest: {…},
  webpack: {…},
  webpackDevServer: {…}
};

...或添加到您的 package.json 文件作为 aunty 属性：

"aunty": {
  "type": "<project_type>",
  "build": {…},
  "serve": {…},
  "deploy": {…},
  "babel": {…},
  "jest": {…},
  "webpack": {…},
  "webpackDevServer": {…}
}

支持的项目 type（当前：basic、preact、react & svelte) 有自己的默认构建配置，但您可以通过扩展项目配置来覆盖它。

build、serve 和 deploy 属性允许您覆盖这些相应命令的默认设置。

Aunty 内部使用了一些工具，您也可以为其提供自定义配置。 如果您为 babel、jest、webpack 和/或 webpackDevServer 属性提供一个对象，该对象将合并到默认配置中。 或者，您可以提供一个函数（针对任何属性），该函数将传递默认配置供您手动修改和返回。

如果您想查看任何命令（及其内部工具）的默认配置，或者您添加的内容的影响，您始终可以使用 --dry（或 -d）标志：

/some/parent/directory/my-project $ aunty serve --dry

应谨慎使用覆盖，因为当我们不偏离默认值时，使用单一依赖工具包的优势最为明显。

如果您不需要覆盖任何项目默认值，您的整个阿姨配置可以是一个包含项目类型的字符串，作为 {type: ""} 的简写。 type 是您的阿姨配置中唯一必需的属性。

Generators

Aunty 带有一些基本的发电机。 运行 aunty generate --help 获取完整列表，或 aunty generate; --help 了解更多详情。

Async/await

将 async/await 和 generators/yield 添加到项目的一种方法是使用 regenerator-runtime 包。

npm install regenerator-runtime 然后：

import 'regenerator-runtime/runtime';

注意：您可能还需要用于 IE11 的 Promise polyfill。

Multiple entry points

默认情况下，Aunty 在 src/ 中查找 index.js。 通过将 build::entry 配置添加到 aunty.config.js 来启用多个入口点。

Replace 'index' with 'story'

module.exports = {
  build: {
    entry: 'story' // will now also support `['story']`
  }
};

Replace 'index' with 'story', 'editor', 'graphic' & 'polyfills'

module.exports = {
  build: {
    entry: ['story', 'editor', 'graphic', 'polyfills']
  }
};

Retain 'index'; add 'editor', 'graphic' & 'polyfills'

module.exports = {
  build: {
    entry: ['index', 'editor', 'graphic', 'polyfills']
  }
};

Authors

• Colin Gourlay (gourlay.colin@abc.net.au)
• Nathan Hoad (hoad.nathan@abc.net.au)
• Simon Elvery (elvery.simon@abc.net.au)
• Joshua Byrd (byrd.joshua@abc.net.au)

Thanks

这个项目最初的灵感来自 nwb，这是 强尼布坎南。 如果您希望开发自己的工具包，Jonny 创建了一个很棒的指南 来帮助您入门。