返回

搭建脚手架：从零开启你的前端进阶之路

前端

大部分前端选手，也包括我自己，经常都是vue-cli，或者create-react-app一把梭。不得不承认这些著名的脚手架写的确实好，能够给我们做项目提速。但是久而久之很容易进入自己的舒适区，最近不是很流行“跳出舒适区”吗？而且各大培训机构都做贩卖焦虑，就为了可以让更多的人可……

脚手架的作用

脚手架是一个用于快速创建新项目的工具，它可以帮助你自动生成项目所需的目录结构、配置文件和基础代码。脚手架可以让你专注于业务逻辑，而不用担心项目搭建的繁琐细节。

从零搭建脚手架

从零搭建脚手架可以让你对脚手架的内部原理有更深入的了解，也可以让你更好地定制脚手架以满足你的特定需求。下面将介绍如何从零搭建一个前端脚手架：

  1. 创建项目目录

首先，你需要创建一个项目目录。在这个目录中，你将存放脚手架的源代码和生成的项目。

mkdir my-scaffold
cd my-scaffold
  1. 初始化Git仓库

接下来，你需要初始化一个Git仓库来管理脚手架的代码。

git init
  1. 创建package.json文件

package.json文件是脚手架的配置文件。它包含了脚手架的名称、版本、依赖项等信息。

{
  "name": "my-scaffold",
  "version": "1.0.0",
  "description": "A simple frontend scaffold",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^4.0.0"
  }
}
  1. 创建index.js文件

index.js文件是脚手架的主文件。它负责生成项目所需的目录结构、配置文件和基础代码。

const fs = require('fs');
const path = require('path');

module.exports = function (projectPath) {
  // 创建目录结构
  fs.mkdirSync(path.join(projectPath, 'src'));
  fs.mkdirSync(path.join(projectPath, 'public'));

  // 创建配置文件
  fs.writeFileSync(path.join(projectPath, 'package.json'), JSON.stringify({
    "name": "my-project",
    "version": "1.0.0",
    "description": "My new project",
    "main": "index.js",
    "scripts": {
      "build": "webpack",
      "start": "webpack-dev-server"
    },
    "dependencies": {
      "react": "^18.0.0",
      "react-dom": "^18.0.0",
      "webpack": "^5.0.0",
      "webpack-cli": "^4.0.0",
      "webpack-dev-server": "^4.0.0"
    }
  }, null, 2));

  fs.writeFileSync(path.join(projectPath, 'webpack.config.js'), `
    const path = require('path');

    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react']
              }
            }
          }
        ]
      },
      devServer: {
        contentBase: './public',
        hot: true
      }
    };
  `);

  // 创建基础代码
  fs.writeFileSync(path.join(projectPath, 'src/index.jsx'), `
    import React from 'react';
    import ReactDOM from 'react-dom';

    const App = () => {
      return (
        <h1>Hello, World!</h1>
      );
    };

    ReactDOM.render(<App />, document.getElementById('root'));
  `);

  fs.writeFileSync(path.join(projectPath, 'public/index.html'), `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
    </head>
    <body>
      <div id="root"></div>
      <script src="bundle.js"></script>
    </body>
    </html>
  `);

  console.log('Scaffold created successfully!');
};
  1. 安装依赖项

接下来，你需要安装脚手架所需的依赖项。

npm install
  1. 测试脚手架

最后，你可以测试脚手架是否工作正常。

npx my-scaffold my-project
cd my-project
npm start

浏览器中应该会打开一个显示“Hello, World!”的页面。

结语

从零搭建脚手架是一个很有挑战性的任务，但也非常有意义。通过搭建脚手架，你可以对脚手架的内部原理有更深入的了解，也可以更好地定制脚手架以满足你的特定需求。