从零到一轻松入门 Babel 与 Webpack
2023-09-10 16:05:52
前言
在使用 Babel 和 Webpack 之前，需要先下载 Node.js 和 Babel。Node.js 是一个 JavaScript 运行时环境，而 Babel 是一个 JavaScript 编译器，可以将 ES6 代码转换为 ES5 代码。
准备工作
- 初始化项目
首先，创建一个新的文件夹，并将项目命名为“my-project”。然后，打开命令行窗口，并导航到“my-project”文件夹。
- 生成 package.json
接下来，使用以下命令生成一个新的 package.json 文件：
npm init -y
这将创建一个名为 package.json 的文件，其中包含项目的基本信息。
- 安装 Babel 需要的包
接下来，使用以下命令安装 Babel 需要的包：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这将安装 Babel 核心包、命令行界面包和 ES6 预设包。
- 初始化项目
接下来，使用以下命令初始化项目：
npx create-react-app my-app
这将创建一个新的 React 项目，并将项目命名为“my-app”。
- 安装 Webpack 需要的包
接下来，使用以下命令安装 Webpack 需要的包：
npm install --save-dev webpack webpack-cli webpack-dev-server
这将安装 Webpack 核心包、命令行界面包和开发服务器包。
创建第一个项目
- 创建一个 src 文件夹
首先，在项目根目录下创建一个名为 src 的文件夹。
- 创建一个 index.js 文件
然后，在 src 文件夹下创建一个名为 index.js 的文件。
- 在 index.js 文件中写入以下代码
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello World!</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
这将创建一个简单的 React 应用程序，并在页面上输出“Hello World!”。
- 运行 Webpack 开发服务器
接下来，使用以下命令运行 Webpack 开发服务器：
npm start
这将启动 Webpack 开发服务器，并在端口 3000 上运行。
- 打开浏览器并访问 http://localhost:3000
现在，您可以打开浏览器并访问 http://localhost:3000 来查看您的应用程序。您应该会看到“Hello World!”显示在页面上。
结论
本教程介绍了如何使用 Babel 和 Webpack 来搭建一个 JavaScript 开发环境，并创建了一个简单的项目。您可以在此基础上进一步学习 Babel 和 Webpack 的更多用法，并创建更复杂的项目。
