@whouu/create-app

Appearance

cli-starter ​

基于 unbuild 的脚手架模板

快速开始 ​

当你选择 template-cli 来创建应用之后，你会得到一个下方举例的 目录结构。

shell
npm create @whouu/app create-cli-app

# 选择 template-cli

cd create-cli-app

npm install

npm run dev

node index.js app-sample

# 内置了 template-sample 模板
# 选择 template-sample 后会创建 app-sample 应用
# 后续你可以在根目录参考 template-sample/ 新增 template-*/ 制作自己的模板
npm create @whouu/app create-cli-app

# 选择 template-cli

cd create-cli-app

npm install

npm run dev

node index.js app-sample

# 内置了 template-sample 模板
# 选择 template-sample 后会创建 app-sample 应用
# 后续你可以在根目录参考 template-sample/ 新增 template-*/ 制作自己的模板

如果你只是本地玩一下，可以跳过下面的内容，从 目录结构 继续阅读，

如果你准备打包并发布到公服或者私服，请继续浏览下方内容。

<project-name> 建议按照 create-* 的格式定义，例如：create-cli-app。

应用创建完毕后， package.json 里面的 name 和 bin 如下所示：

json
{
  "name": "create-cli-app",
  "bin": "index.js",
  "private": true
}
{
  "name": "create-cli-app",
  "bin": "index.js",
  "private": true
}

在 create-cli-app/ 根路径下执行：

shell
# 打包 package
npm run build

# 新增本地软连接
# 你会得到一个全局的命令 create-cli-app
npm link

# 验证 bin 是否生效
# /usr/local/bin/create-cli-app
which create-cli-app

# 使用 bin 创建应用
create-cli-app app-sample

# 删除本地软连接
npm unlink -g create-cli-app

# 将 package.json 中的 private: true 改成 false
# 执行 npm publish 即可发布到公服
# 若没有登录过公服，需要先执行 npm login
# 若公服上已经存在同名的库，则会发布失败
npm publish --registry https://registry.npmjs.org

# 发布成功后，验证是否成功
# 换一个其他目录
cd ..

# 全局安装刚才发布的 create-cli-app
# 由于我们的命名方式 create-*
# 安装并使用 create-cli-app 现在支持多种方法：

# 方法一. npx
npx create-cli-app <project-name>
# 方法二. npm
npm create cli-app <project-name>
# 方法三. yarn
yarn create cli-app <project-name>
# 方法四. pnpm
pnpm create cli-app <project-name>
# 方法五. cli
npm i -g create-cli-app
create-cli-app <project-name>
# 打包 package
npm run build

# 新增本地软连接
# 你会得到一个全局的命令 create-cli-app
npm link

# 验证 bin 是否生效
# /usr/local/bin/create-cli-app
which create-cli-app

# 使用 bin 创建应用
create-cli-app app-sample

# 删除本地软连接
npm unlink -g create-cli-app

# 将 package.json 中的 private: true 改成 false
# 执行 npm publish 即可发布到公服
# 若没有登录过公服，需要先执行 npm login
# 若公服上已经存在同名的库，则会发布失败
npm publish --registry https://registry.npmjs.org

# 发布成功后，验证是否成功
# 换一个其他目录
cd ..

# 全局安装刚才发布的 create-cli-app
# 由于我们的命名方式 create-*
# 安装并使用 create-cli-app 现在支持多种方法：

# 方法一. npx
npx create-cli-app <project-name>
# 方法二. npm
npm create cli-app <project-name>
# 方法三. yarn
yarn create cli-app <project-name>
# 方法四. pnpm
pnpm create cli-app <project-name>
# 方法五. cli
npm i -g create-cli-app
create-cli-app <project-name>

由于 packageName 很容易重名，所以通常会使用 scoped 的方式来命名 packageName，

在使用 scoped 的方式，会与上述的方法有一些区别：

  • 命名方式：@scoped/create-*

  • 发布方式：npm publish --registry https://registry.npmjs.org --access public

  • 声明方式：

    json
    # 假定你的包名为：@whouu/create-app

{
	"name": "@whouu/create-app",
	"bin": {
		"create-app": "index.js"
	}
}
    # 假定你的包名为：@whouu/create-app

{
	"name": "@whouu/create-app",
	"bin": {
		"create-app": "index.js"
	}
}

  • 使用方式：

    shell
    # 假定你的包名为：@whouu/create-app

# 方法一. npx
npx @whouu/create-app <project-name>
# 方法二. npm
npm create @whouu/app <project-name>
# 方法三. yarn
yarn create @whouu/app <project-name>
# 方法四. pnpm
pnpm create @whouu/app <project-name>
# 方法五. cli
npm i -g @whouu/create-app
create-app <project-name>
    # 假定你的包名为：@whouu/create-app

# 方法一. npx
npx @whouu/create-app <project-name>
# 方法二. npm
npm create @whouu/app <project-name>
# 方法三. yarn
yarn create @whouu/app <project-name>
# 方法四. pnpm
pnpm create @whouu/app <project-name>
# 方法五. cli
npm i -g @whouu/create-app
create-app <project-name>

每次执行 npm publish 前需要更改版本号，如果不使用第三方库，例如：release-it

可以直接使用 npm version 来更新：

shell
npm version [<newversion> | major | minor | patch ]

# 例如：npm version patch
# 会将版本号从 0.0.0 升级到 0.0.1
npm version [<newversion> | major | minor | patch ]

# 例如：npm version patch
# 会将版本号从 0.0.0 升级到 0.0.1

目录结构 ​

shell
📦template-cli                    # 根目录
 ┣ 📂src
 ┃ ┗ 📜index.ts                   # 脚本源码
 ┣ 📂template-sample              # 模板示例
 ┃ ┣ 📜_gitignore
 ┃ ┗ 📜package.json
 ┣ 📜README.md
 ┣ 📜.gitignore
 ┣ 📜build.config.ts              # unbuild 配置文件
 ┣ 📜index.js                     # bin alias
 ┣ 📜package.json
 ┗ 📜tsconfig.json
📦template-cli                    # 根目录
 ┣ 📂src
 ┃ ┗ 📜index.ts                   # 脚本源码
 ┣ 📂template-sample              # 模板示例
 ┃ ┣ 📜_gitignore
 ┃ ┗ 📜package.json
 ┣ 📜README.md
 ┣ 📜.gitignore
 ┣ 📜build.config.ts              # unbuild 配置文件
 ┣ 📜index.js                     # bin alias
 ┣ 📜package.json
 ┗ 📜tsconfig.json

脚本说明 ​

json
"scripts": {
	"dev": "本地开发",
	"build": "本地构建",
	"prepublishOnly": "发布 npm package 钩子，触发一次构建",
	"typecheck": "ts check"
},
"scripts": {
	"dev": "本地开发",
	"build": "本地构建",
	"prepublishOnly": "发布 npm package 钩子，触发一次构建",
	"typecheck": "ts check"
},

其他 ​

在创建新模板时，.gitignore 文件，你需要重命名成 _gitignore

Released under the MIT License.

Copyright © 2023-present Lei Zhang