cli创建脚手架+调试一句话：减少重复性工作。当我们需要创建大量相同的文件目录，但是目录一些配置用户自定义，就可以使用脚

一，前置知识

1、前端脚手架作用

‌节约时间和精力‌：前端脚手架可以自动化生成项目结构、配置文件和基础代码，避免了从零开始配置项目的繁琐步骤。它减少了手动安装和配置开发工具（如Webpack、Babel、ESLint等）的时间，提供了组件和页面的模板，减少了重复性工作‌。
‌统一项目规范‌：使用脚手架生成的项目通常符合行业最佳实践，提供一致的项目结构和代码风格，有助于团队协作。通过预配置的工具链和依赖项，避免了手动配置时可能出现的错误或冲突，使得项目更加稳定可靠‌。
‌提升开发效率‌：脚手架通过命令行执行，可以自动化处理项目创建、git操作、发布上线等任务，进一步提升了研发效能。它还可以覆盖本地功能，如创建项目自动化、本地git操作自动化等，这些都是传统的自动化构建工具如Jenkins、Travis无法完全覆盖的‌

2、npm create cl-app

npm命令文档地址

`npm create cl-app` 等同 `npm init cl-app`

`npm init cl-app` 等同 `npm exec create-cl-app`

npm exec <pkg>的执行流程 - 在本地查找是否有<pkg>对应的npm包

若找到，则运行这个包的package.json中bin字段对应的可执行文件;
若未找到，在远程npm仓库查找是否有<pkg>对应的npm包 - 若找到，则提示是否下载到本地 - 下载完成后，再运行这个包package.json中bin字段对应的可执行文件

`npm exec create-cl-app` 等同 `npx create-cl-app`

npx使用npm exec命令，而不是单独的参数解析器和安装过程。并提供了一些支持，以保持与它在以前版本中接受的参数的向后兼容性。

因此我们姑且理解 npx = npm exec或npm x

当你使用npx运行命令时，它首先检查你的本地node_modules目录。如果在那里找到了包，它就会被执行。如果没有，npx会临时安装包，运行它，然后在执行后移除它

`npx create-cl-app` 与 `npm i create-cl-app && create-cl-app`

npx 一次性 CLI 工具，避免全局安装
npm i- 需要在当前项目持久安装 a，并可以多次使用，而不用每次都下载。适用于项目开发，而不是临时运行工具

3、`npm link` vs `npm i -g`

我们本地开发自己的脚手架命令，一般都是采用 npm link 将脚本链接到全局，方便调试

`npm link`

用于在本地开发时创建符号链接（symlink），让本地开发的 npm 包能在其他项目中使用，而不需要发布到 npm 仓库。

工作原理

运行 npm link 命令时，npm 会在全局的 node_modules 目录（通常是 ~/.npm-global/lib/node_modules/）中创建一个符号链接，指向当前开发的包目录。
在另一个项目中运行 npm link <package-name>，npm 会从全局 node_modules 目录中找到该符号链接，并将其链接到该项目的 node_modules 目录中。

使用场景

在本地开发 npm 包时，需要在另一个项目中测试该包，而不想每次更改后都重新 npm publish 和 npm install。

例如：

# 在本地 npm 包目录下运行
cd my-local-package
npm link

# 在另一个项目中使用该包
cd ../my-project
npm link my-local-package

`npm i -g`

用于全局安装 npm 包，通常用于安装 CLI 工具或全局可用的 Node.js 模块。

工作原理

npm i -g <package-name> 会将指定的包安装到全局 node_modules 目录（通常是 ~/.npm-global/lib/node_modules/）。
如果包中包含可执行文件（如 CLI），它们会被放入 bin 目录（通常是 ~/.npm-global/bin/），并且可以在终端中全局调用。

二、关于vue-cli脚手架

安装全局依赖

npm install -g @vue/cli

我们可以执行 npm config ls可查看 prefix = "C:\\Users\\xx\\AppData\\Roaming\\npm" 就是全局依赖的安装位置查看，记得该地址需要添加到电脑环境变量里面，命令行才会生效

我们查看 package.json ,可看到如下信息：

  "bin": {
    "vue": "bin/vue.js"
  },

创建新项目

运行以下命令：

vue create hello-world

在现有的项目中安装插件

vue add eslint

启动命令

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。

这是你使用默认 preset 的项目的 package.json：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

Vue CLI 2

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

在vue-cli版本3后，我们可以了解到项目目录没有了webpack.config.js，配置文件在 vue.config.js

虽然 Vue CLI 3 不再直接使用 webpack.config.js 文件，但通过 vue.config.js 和其提供的 configureWebpack 或 chainWebpack 方法，你可以非常灵活地配置 webpack。这种方式使得项目配置更加集中和易于管理。

vue.config.js 配置

一般情况下，我们基本只需要改一下接口代理

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

三，原理

利用node脚本，获取用户命令，下载相应的模版，并且更改配置参数

1、依赖库

commander 解析命令行参数
download-git-repo下载模版
inquirer 获取用户自定义的信息
handlebars 将用户信息填充到模板中
ora显示下载中的效果
chalk更改console.log关键词的颜色
log-symbols'输出特殊字符，例如对勾和叉叉

在前面步骤中，我们可以获取命令行用户的交互，根据用户选择生成相应的代码结构

2、思路: 启动脚本自定义配置

我们在使用自己的启动脚本的时候，这时候处于node的环境，可以拿到电脑上的文件，这时候我们可以去自定义webpack、vite的配置

将默认的配置不暴露给用户，提供自定义配置选项，最终将两者合并。如vue.config.js就是提供自定义配置，减少配置难度
其他的配置，如引入微前端框架，可以通过一个简单配置来实现
根据代码结构生成路由配置
修改入口文件位置，自定义入口文件。这样你都看不到vue、react入口文件了

//vue2入口写法
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

//vue3入口写法
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

//react17入口写法
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom'; // 如果使用路由
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

//react18入口写法 引入concurrent rendering
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom'; // 如果使用路由
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

四、调试脚手架

调试node之前，可以可以先看看 debugger的原理

4.1 node的调试

正在vscode调试node的时候，我们主要有2种调试窗口

4.1.1 浏览器界面

我们通过 node --inspect-brk xxx启动的默认界面是浏览器

运行上面的命令后，终端会输出类似：

Debugger listening on ws://127.0.0.1:9229/xxxxxxx

在 Chrome 地址栏输入 chrome://inspect，点击 "Open dedicated DevTools for Node" 进行调试。

4.1.2 vscode界面

在vscode 鼠标悬浮在package.json 的scripts命令行前面，就会出现debugegr的按钮

也可以配置 .vscode\launch.json

在 VSCode 侧边栏打开 “运行和调试” (Ctrl+Shift+D)
点击 “创建 launch.json 文件”
选择 Node.js，然后修改 launch.json 如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run Node.js",
      "program": "${workspaceFolder}/index.js",
      "cwd": "${workspaceFolder}"
    }
  ]
}

主要配置：

"program" 指定要运行的文件，比如 index.js。
"cwd" 设定当前工作目录，通常是 ${workspaceFolder}。

4.2、node+ts 的调试

主要介绍两种

4.2.1 tsc+ `.vscode\launch.json`

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug TS with Source Map",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/src/index.ts",
            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
            "preLaunchTask": "tsc: build - tsconfig.json",
            "sourceMaps": true
        }
    ]
}

如果想要手动编译 TypeScript 再进行调试，可以先用 tsc 进行编译，再用 node --inspect 运行编译后的文件。

编译 TypeScript 代码

tsc index.ts --sourceMap

这会生成 index.js 和 index.js.map，其中 .map 文件用于 TypeScript 源码映射。

4.2.2 ts-node

ts-node 是一个TypeScript执行引擎,能让我们在 Node.js 环境下直接运行 TypeScript 代码

安装 ts-node
```
npm install -g ts-node typescript
```

添加调试配置

在 VSCode 侧边栏打开 “运行和调试” (Ctrl+Shift+D)
点击 “创建 launch.json 文件”

选择 Node.js，然后修改 launch.json 如下：


{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run TypeScript",
      "runtimeArgs": ["-r", "ts-node/register"],
      "program": "${workspaceFolder}/index.ts",
      "outFiles": ["${workspaceFolder}/**/*.js"],
      "sourceMaps": true
    }
  ]
}

主要配置：
- "runtimeArgs": ["-r", "ts-node/register"] 直接运行 TypeScript 文件
- "sourceMaps": true 允许使用 TypeScript 源码调试
- "outFiles": ["${workspaceFolder}/**/*.js"] 指定编译后文件位置

五，npm发布

打开npm官网
注册一个npm账号
在npm中检索是否有重复的包名
将package.json中的name改为发布到npm上的包名
打开控制台，执行npm login
登陆成功后，在项目下执行npm publish 发布

github demo地址

欢迎关注我的前端自检清单，我和你一起成长

cli创建脚手架+调试

一，前置知识

1、前端脚手架作用

2、npm create cl-app

npm create cl-app 等同 npm init cl-app

npm init cl-app 等同 npm exec create-cl-app

npm exec create-cl-app 等同 npx create-cl-app

npx create-cl-app 与 npm i create-cl-app && create-cl-app

3、npm link vs npm i -g

npm link

工作原理

使用场景

npm i -g

工作原理

二、关于vue-cli脚手架

安装全局依赖

创建新项目

在现有的项目中安装插件

启动命令

Vue CLI 2

vue.config.js 配置

三，原理

1、依赖库

2、思路: 启动脚本 自定义配置

四、调试脚手架

4.1 node的调试

4.1.1 浏览器界面

4.1.2 vscode界面

4.2、node+ts 的调试

4.2.1 tsc+ .vscode\launch.json

4.2.2 ts-node

五，npm发布

`npm create cl-app` 等同 `npm init cl-app`

`npm init cl-app` 等同 `npm exec create-cl-app`

`npm exec create-cl-app` 等同 `npx create-cl-app`

`npx create-cl-app` 与 `npm i create-cl-app && create-cl-app`

3、`npm link` vs `npm i -g`

`npm link`

`npm i -g`

2、思路: 启动脚本自定义配置

4.2.1 tsc+ `.vscode\launch.json`