超详细的前端脚手架入门篇

最新推荐文章于 2025-02-26 21:59:33 发布

CCC_go

最新推荐文章于 2025-02-26 21:59:33 发布

阅读量3.9k

点赞数 3

分类专栏：前端工程文章标签：前端架构

本文链接：https://blog.csdn.net/yadang2/article/details/132548377

版权

脚手架初认识

其实，我们通过平时使用的脚手架就不难推测得出脚手架的基本作用了。

比如： Vue-cli 就是一个脚手架，能够帮助我们快速搭建和配置 vuejs 项目，它提供了基本的项目结构、构建流程和开发工具链，让开发者更专注于业务的开发，提高开发和部署效率。

又比如：npm 一款依赖管理工具，简化了依赖安装和打包构建的过程。

又比如：commitizen 能够帮助我们去规范 git commit 的信息和结构，提高项目的规范性。

所以，前端脚手架的有以下优点：

快速初始化：脚手架可以自动生成项目所需的基本文件结构、配置文件和示例代码，使项目的初始化过程变得简单和快速。
规范项目结构：脚手架定义了一套标准的项目结构和文件组织方式，使团队成员能够在不同项目中保持一致的开发风格和规范，提高团队协作效率。
依赖管理和构建流程：脚手架通常集成了依赖管理工具（如npm、yarn）和构建工具（如Webpack、Rollup）。
可扩展性：脚手架提供了一些自定义配置的选项，允许开发人员根据项目需求进行灵活的配置和扩展，满足特定的需求。

你将学到什么

本文是一篇脚手架入门文，适合想要搭建自己的脚手架却不知道从何入手的开发者。

如何搭建一个脚手架工程。
如何开发和调试一个脚手架
脚手架中如何接收和处理命令参数。
如何实现文件的拷贝。
如何创建询问式的交互。
如何处理路径问题。

本文完整代码已上传至 github

实现

环境

node 16.14+
包管理工具：pnpm 8.5+

第三方依赖

yargs node 命令解决方案。
inquirer 在 shell 命令行中建立询问式交互
copy-dir 实现文件拷贝
mustache 动态更改文件
ora 在 shell 命令行中实现加载动画
fs-extra 操作文件的库，比 node 自带的 fs 更强大一些

如何搭建一个脚手架工程

先创建一个脚手架的文件夹，如：simple-cli，并执行初始化。

# 创建文件夹
mkdir simple-cil
# 进入文件夹
cd simple-cli
# 初始化
npm init -y

创建bin文件夹，添加index.js。

#! /usr/bin/env node

console.log('hello cli');

在package.json中指定执行命令和执行的文件。

"scripts": {
   
    "cli": "node ./bin/index.js"
  },
  "bin": {
   
    "cli": "./bin/index.js"
  },

在当前根目录下，执行 pnpm cli，得到以下结果：

如何开发和调试一个脚手架

/bin 放置的是入口文件，我们新建一个 /src 目录来放置业务逻辑的代码。

nodejs中，默认是使用 CommonJs 规范去编写代码的，但是如果想用 es6 语法，就必须添加一些插件去做转译工作。

我们可以试试不使用babel转译工具，直接使用es语法会怎么样。

💥试错环节开始

新建 /src/test/index.js, 添加

const test = async () => {
   
  console.log('hello test');
}
console.log('hello cli');

export default test

/bin/index.js

#! /usr/bin/env node

var cli = require('../src/index.js');
module.exports = cli;

根目录下，执行 pnpm cli 发现以下报错：无法识别 export 语法

💥试错环节结束

所以使用es6语法，需要有以下步骤：

安装babel相关插件：

pnpm add @babel/cli @babel/core @babel/plugin-proposal-object-rest-spread @babel/preset-env -D

根目录下，新建 babel.config.js，并添加以下内容：

module.exports = {
   
  presets: [
    [
      "@babel/preset-env",
      {
   
        targets: {
   
          node: "10",
        },
      },
    ],
  ],
  plugins: ["@babel/plugin-proposal-object-rest-spread"],
};

根目录下，新建 jsconfig.json，并添加以下内容：

{
   
  "compilerOptions": {
   
      "target": "ES6",
      "module": "commonjs",
      "experimentalDecorators" : true
  }
}

这样就支持用 ESM 的方式去编写了。
但是！我们还需要将 ESM 编译成 CommonJs 的形式，让nodejs去执行。

编译：在 pacakge.json 中，添加打包命令，打包后的产物放在输出目录 /dist 下：

"scripts": {
   
    ....
    "build": "babel src --out-dir dist",
    "build:watch": "babel --watch src --out-dir dist"
  },

执行打包命: npm run build:watch。命令会一直开启着，监听本地文件变化，实现自动打包输出。发现根目录下多了 /dist 这个目录，就是打包的产物。
修改 /bin/index.js 里文件的引用路径：

#! /usr/bin/env node

var cli = require('../dist/index.js');
module.exports = cli;

这时候再来试试效果吧。

✌✌成功了！接着探索吧！

脚手架中如何接收和处理命令参数。

nodejs中的 process 模块提供了当前进程相关的全局环境信息，如：命令参数、环境变量、命令运行路径等。我们把它打印出来看一下：

修改 /src/index.js

const process = require('process');

console.log(process.</

最低0.47元/天解锁文章