零基础轻松入门React开发框架搭建

在公司入职也很久了，发现很多下面的同学都不理解我们所用开发框架是如何搭建起来的，为了加强小伙伴们的基础功底，所以有了这篇文章。此次我会带领大家一步步的来搭建一个开发框架，一共分四篇文章来写。

1. 前期准备

在开始搭建开发框架之前，我们需要准备以下环境：

• Node.js
• npm
• React
• webpack
• Babel

2. 安装依赖项

首先，我们需要安装必要的依赖项。我们可以使用npm命令来安装这些依赖项。

npm install --save-dev create-react-app

3. 创建项目

使用create-react-app命令创建一个新的React项目。

npx create-react-app my-app

4. 配置Webpack

在项目中安装webpack和Babel的loader。

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

然后，在项目中创建webpack.config.js文件，并添加以下配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

5. 配置Babel

在项目中创建.babelrc文件，并添加以下配置：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

6. 运行项目

最后，我们可以使用yarn webpack命令来运行项目。

yarn webpack

此时，webpack会将项目中的代码打包成main.js文件，并将其放在dist目录中。

7. 总结

本文详细介绍了如何从零开始搭建一个React开发框架。希望本文能够帮助初学者快速掌握React框架搭建的基础知识。在接下来的文章中，我们将继续探讨如何搭建一个更完整的React开发框架。