返回

你的第一次React或Vue3项目启动：零构建运行环境

前端

零构建运行环境的优势

零构建运行环境有很多优点，其中包括：

  • 易于学习： 零构建运行环境很简单，非常适合希望学习框架或构建工具扩展的同学。
  • 快速搭建： 零构建运行环境搭建速度很快，非常适合快速启动项目。
  • 可扩展性强： 零构建运行环境可扩展性很强，非常适合希望实现和扩展构建工具的同学。
  • 定制性强： 零构建运行环境具有很强的定制性，非常适合希望自定义构建过程的同学。

如何创建一个零构建运行环境

创建一个零构建运行环境非常简单，只需要以下几个步骤：

  1. 安装Node.js和npm。
  2. 创建一个新的项目目录。
  3. 在项目目录中运行以下命令：
npm init -y
  1. 在项目目录中创建一个 package.json 文件，并添加以下内容：
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}
  1. 在项目目录中创建一个 index.js 文件，并添加以下内容：
const React = require('react');
const ReactDOM = require('react-dom');

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

ReactDOM.render(<App />, document.getElementById('root'));
  1. 在项目目录中创建一个 public 目录。
  2. 在 public 目录中创建一个 index.html 文件，并添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <div id="root"></div>
</body>
</html>
  1. 运行以下命令来启动项目：
npm start

浏览器将打开，并显示 "Hello, world!"。

结论

零构建运行环境是一个非常有用的工具，可以帮助同学们快速启动项目，并学习框架或构建工具扩展。如果您希望学习框架或构建工具扩展，那么我强烈建议您尝试一下零构建运行环境。