不可不知的前端工程化——脚手架搭建

站长

2023年09月17日 01:57 · 阅读数 13

背景

前端脚手架的出现解决了许多与前端项目初始化和设置相关的问题。使用脚手架，开发人员可以快速创建并配置一个新项目，从而提高工作效率。脚手架为新项目提供了一个预先定义的结构和规范，这有助于保持项目的一致性和易于维护。此外，脚手架还可以强制实施编码规范和最佳实践，以提高代码质量。

如何选择适合脚手架

在选择前端脚手架时，需要考虑一些关键因素，以确保选择的脚手架能满足实际项目需求。以下是一些选择时需要考虑的因素：

需求分析：在选择脚手架之前，首先要分析项目的需求。明确项目所需的技术栈、功能和目标。确定哪些脚手架最适合当下的项目。
技术栈：根据技术栈选择适当的脚手架。例如，如果项目使用React，那么Create React App可能是一个不错的选择。同样，如果您使用Vue.js，那么Vue CLI可能更适合项目。
社区支持和活跃度：选择一个拥有活跃社区和良好支持的脚手架。可以在遇到问题时寻求帮助，并确保脚手架会持续更新和维护。查看GitHub上的star数量、issue和PR等指标，了解脚手架的活跃度和受欢迎程度。
文档和资源：选择具有详细文档和丰富资源的脚手架。可以更快地学习如何使用脚手架，并解决可能遇到的问题。同时，检查是否有相关的教程、博客文章和社区资源，以方便能深入了解脚手架的使用方法。
可扩展性和定制性：选择一个可扩展和定制的脚手架，以便根据项目需求调整配置和功能。确保脚手架允许您添加自定义插件和配置，以满足项目的特殊需求。
最佳实践：选择一个遵循当前最佳实践的脚手架。可确保项目在性能、安全性和可维护性方面都能达到较高标准。
试用和评估：在做出最终决定之前，尝试使用几个候选脚手架创建示例项目。可以评估脚手架的易用性、功能和性能，从而做出更明智的选择。

目前流行的脚手架

Vue CLI

Vue CLI 由Vue.js 官方维护，其定位是Vue.js快速开发的完成系统

完整的Vue CLI由三部分组成：

作为全局命令的 @vue/cli
作为项目内集成工具的 @vue/cli-service
作为功能插件系统的 @vue/cli-plugin-

自定义一个Vue脚手架需要分为以下几个步骤：

全局安装Vue CLI
使用 Vue CLI 创建一个新项目
自定义项目结构
配置项目
创建自定义模板
编写脚本

步骤1：全局安装Vue

首先需要安装最新版的Vue CLI。在命令行中运行以下命令：

npm install -g @vue/cli

步骤2：使用 Vue CLI 创建一个新项目

在命令行中，运行以下命令创建一个新的Vue项目：

vue create my-custom-vue-cli

然后，按照提示选择或配置项目的基本设置。

步骤3：自定义项目结构

进入新创建的项目目录：

cd my-custom-vue-cli

然后，根据需要自定义项目的文件和目录结构。例如，你可能希望创建以下目录结构：

my-custom-vue-cli/
|-- src/
    |-- components/
    |-- views/
    |-- router/
    |-- store/
    |-- assets/
    |-- App.vue
    |-- main.js
|-- public/
|-- tests/
|-- .gitignore
|-- babel.config.js
|-- package.json
|-- README.md

步骤4：配置项目

根据需要配置项目的依赖项、插件和其他设置。你可以编辑package.json文件来添加依赖项，或者使用vue add命令安装插件。例如，你可能需要安装以下插件：

vue add router
vue add vuex
vue add axios

步骤5：创建自定义模板

在src/components和src/views目录中创建自定义的Vue组件和视图模板。这些模板可以根据项目的需求进行定制。

步骤6：编写脚本

在package.json文件中的scripts部分添加自定义脚本。例如，可以添加以下脚本来运行开发服务器、构建生产版本和运行测试：

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

现在已经创建了一个自定义的Vue脚手架。在项目目录中运行npm run serve命令，启动开发服务器，然后在浏览器中查看项目。调整项目设置和模板以满足你的需求，并根据需要添加更多功能。

Create React App

自定义一个React脚手架需要分为以下几个步骤：

全局安装Create React App
使用 Create React App 创建一个新项目
自定义项目结构
配置项目
创建自定义模板
编写脚本

步骤1：全局安装Create React App

首先需要安装最新版的Create React App。在命令行中运行以下命令：

npm install -g create-react-app

步骤2：使用 Create React App 创建一个新项目

在命令行中，运行以下命令创建一个新的React项目：

create-react-app my-custom-react-cli

步骤3：自定义项目结构

进入新创建的项目目录：

cd my-custom-react-cli

然后，根据需要自定义项目的文件和目录结构。例如，你可能希望创建以下目录结构：

my-custom-react-cli/
|-- src/
    |-- components/
    |-- views/
    |-- router/
    |-- store/
    |-- assets/
    |-- App.js
    |-- index.js
|-- public/
|-- tests/
|-- .gitignore
|-- package.json
|-- README.md

步骤4：配置项目

根据需要配置项目的依赖项、插件和其他设置。可以编辑package.json文件来添加依赖项。例如，可能需要安装以下依赖项：

npm install react-router-dom
npm install redux
npm install react-redux
npm install axios

步骤5：创建自定义模板

在src/components和src/views目录中创建自定义的React组件和视图模板。这些模板可以根据项目的需求进行定制。

步骤6：编写脚本

在package.json文件中的scripts部分添加自定义脚本。例如，你可以添加以下脚本来运行开发服务器、构建生产版本和运行测试：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

现在已经创建了一个自定义的React脚手架。在项目目录中运行npm start命令，启动开发服务器，然后在浏览器中查看项目。调整项目设置和模板以满足你的需求，并根据需要添加更多功能。

Yeoman、 Create React App（CRA）、Vue CLI 三者的区别

Yeoman

代表一般开源工具的理念：

它专注于实现脚手架生成器的逻辑和提供展示第三方生成器，主要目标群体是生成器的开发者。

Create React App（CRA）

代表面向某一技术栈降低开发复杂度的理念：

它提供一个包含各开发工具的集成工具集和标准化的开发-构建-测试三步流程脚本。

Vue CLI

代表更灵活折中的理念：

继承了CRA降低配置复杂度的优点
在创建项目的过程中提供更多交互式选项来配置技术栈的细节，允许在项目中使用自定义配置。

如何使用Node.js自定义脚手架

使用 Node.js 手写一个自定义的脚手架需要以下几个步骤：

初始化项目并安装依赖
编写命令行接口
创建项目模板
下载和拷贝模板
完成项目创建

接下来，将详细说明这些步骤。

步骤1：初始化项目并安装依赖

首先，在命令行中创建一个新目录并初始化一个新的 npm 项目：

mkdir my-custom-cli
cd my-custom-cli
npm init -y

然后，安装必要的依赖：

npm install commander download-git-repo ora inquirer --save

步骤2：编写命令行接口

在项目根目录下创建一个名为 index.js 的文件，然后添加以下内容：

#!/usr/bin/env node

const program = require('commander');
const inquirer = require('inquirer');
const { createProject } = require('./createProject');

program
  .version('0.1.0')
  .command('create <projectName>')
  .action(async projectName => {
    const questions = [
      {
        type: 'input',
        name: 'author',
        message: 'Author:',
      },
      // 添加更多问题，例如项目描述、许可证等
    ];

    const answers = await inquirer.prompt(questions);
    createProject(projectName, answers);
  });

program.parse(process.argv);

步骤3：创建项目模板

在项目根目录下，创建一个名为 template 的文件夹，并在其中创建一个简单的项目模板。例如，可以创建以下结构：

复制代码
template/
|-- src/
    |-- index.js
|-- package.json

你可以根据需要自定义模板。

步骤4：下载和拷贝模板

在项目根目录下创建一个名为 createProject.js 的文件，然后添加以下内容：

const path = require('path');
const fs = require('fs-extra');
const ora = require('ora');
const download = require('download-git-repo');

async function createProject(projectName, answers) {
  const spinner = ora('Downloading template...').start();

  try {
    await downloadTemplate();
    spinner.succeed('Template downloaded.');

    const sourcePath = path.join(__dirname, 'template');
    const targetPath = path.join(process.cwd(), projectName);

    await fs.copy(sourcePath, targetPath);
    spinner.succeed('Template copied.');

    spinner.info('Customizing template...');
    customizeTemplate(targetPath, answers);
    spinner.succeed('Template customized.');

    console.log(`\n🎉 Project ${projectName} created successfully.`);
  } catch (error) {
    spinner.fail('Error: ' + error.message);
  }
}

function downloadTemplate() {
  // 如果模板托管在 GitHub，可以使用 download-git-repo
  // 如果模板在本地，可以跳过此步骤
  return new Promise((resolve, reject) => {
    download('github-username/repo-name', 'template', { clone: true }, error => {
      if (error) {
        reject(error);
      } else {
        resolve();
      }
    });
  });
}

function customizeTemplate(targetPath, answers) {
  const packageJsonPath = path.join(targetPath, 'package.json');
  const packageJson = require(packageJsonPath);

  packageJson.author = answers.author;
  // 根据用户输入的其他信息，如项目描述、许可证等，自定义模板

  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
}

module.exports = { createProject };

步骤5：完成项目创建

现在已经创建了一个自定义的脚手架。在项目根目录下运行以下命令，将脚手架链接到全局：

npm link

可以使用 my-custom-cli create <projectName> 命令创建新项目。

请注意，这是一个基本的脚手架，可能需要根据需求进行调整。例如，你可能想要添加更多功能，如支持多个模板、自定义文件名等。你可以根据需要修改 createProject.js 文件以实现这些功能。

最后，如果想将这个脚手架发布到 npm，可以参考以下步骤：

在 package.json 文件中添加 bin 字段以指定命令行名称和 index.js 文件的路径。例如：

{
  "name": "my-custom-cli",
  "version": "0.1.0",
  "description": "A custom CLI for scaffolding projects",
  "main": "index.js",
  "bin": {
    "my-custom-cli": "./index.js"
  },
  "dependencies": {
    // ...
  }
}

确保已在创建 npm 账户并使用 npm login 命令登录。
在项目根目录下运行 npm publish 命令发布项目。可以把你的脚手架发布到 npm，供其他开发者安装和使用。

注意：在发布之前，请确保你已经删除了 template 文件夹中的 .git 文件夹（如果有的话），因为 npm 不允许发布包含 .git 文件夹的项目。

现在，其他开发者可以使用 npm install -g my-custom-cli 命令安装并使用你的脚手架。