不可不知的前端工程化——脚手架搭建
背景
前端脚手架的出现解决了许多与前端项目初始化和设置相关的问题。使用脚手架,开发人员可以快速创建并配置一个新项目,从而提高工作效率。脚手架为新项目提供了一个预先定义的结构和规范,这有助于保持项目的一致性和易于维护。此外,脚手架还可以强制实施编码规范和最佳实践,以提高代码质量。
如何选择适合脚手架
在选择前端脚手架时,需要考虑一些关键因素,以确保选择的脚手架能满足实际项目需求。以下是一些选择时需要考虑的因素:
- 需求分析:在选择脚手架之前,首先要分析项目的需求。明确项目所需的技术栈、功能和目标。确定哪些脚手架最适合当下的项目。
- 技术栈:根据技术栈选择适当的脚手架。例如,如果项目使用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
命令安装并使用你的脚手架。
转载自:https://juejin.cn/post/7246282056006238264