y-cli 自制脚手架工具之路系列一

84 阅读2分钟

一.初始化脚手架

创建项目目录

1、初始化脚手架包

1.1 执行如下命令

yarn init
or
npm init

1.2 初始目录接口

新增 bin/cli.js、src/main.ts等文件

y-cli
└─ bin        
│  └─ cli.js              # node 环境下要运行的脚本
├─ src                        
│  ├─ constants.ts        # 主路口文件
│  └─ main.ts               
└─ package.json

src/main.ts

console.log('hello y-cli');

package.json

{
  "name": "y-cli",
  "version": "1.0.0",
  "description": "y-cli",
  "main": "index.js",
  "bin": {
    "y-cli": "./bin/cli.js"
  },
  "keywords": [],
  "repository": {},
  "author": "Y_mo",
  "license": "MIT"
}

1.3 创建临时连接,实现脚手架命令

执行如下命令:mac 环境有文档访问权限的限制,执行命令前加上 sudo; 例如:sudo yarn link

成功连接:yarn link v1.22.15 success Registered "y-cli". info You can now run yarn link "y-cli" in the projects where you want to use this package and it will be used instead. ✨ Done in 0.03s.

执行脚手架命令

y-cli

遇到的问题

在mac下,执行y-cli后,可能会有如下的情况:

➜ y-cli zsh: permission denied: y-cli

解决方案: sudo chmod -R 777 授权的目录或文件路径

sudo chmod -R 777 /Users/yusunqi/Downloads/plugin-project/y-cli

2、初始化eslint

2.1 安装EsLint

yarn add eslint 
or 
npm i eslint

2.2 初始化配置文件

npx eslint --init

选择选项完成配置

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn

到此就完成了第一个阶段的基础的搭建,我们下期见!