背景

最近在练习使用chatGPT，萌生一个使用chatGPT来创建前端项目的想法，于是就试验了一下。

特别说明一下，因为一些原因，这里没有使用chatGPT，使用的new bing依据个人使用体验的对比，基本上是一致的

一、不使用脚手架，创建一个react项目，都需要哪些文件

依据过往的经验，我总结了一张脑图：

相信，有些经验的小伙伴，可以看出来，这里是缺少一些依赖的，如webpack-cli、html-webpack-plugin等等，一会我们看一下，它是否会给我们自动补齐。

二、生成package.json

依据脑图我们总结一句话:写一个前端项目的package.json，要求有:react、typescript、react-router、redux、webpack

package.json如下：

我们简单分析一下这个文件：

script中使用了"jest"，而依赖里却没有装jest依赖，后面可能需要我们手动安装，额外创建了两个命令build、start，如果是我们手动创建，这两个命令需要我们手动编写的。
dependencies中额外安装了react-dom、react-router-dom、react-redux
devDependencies中加入ts需要的@types、webpack-cli、devserver、babel-loader、ts-loader、html-webpack-plugin这些依赖并没有出现我们的描述中，但对于这项目是必须的，也由AI生成了

目前来看，基本满足我们项目的需要

三、生成webpack.config.js

对于生成webpack的配置文件，我们使用脑图总结一句话：写一个webpack.config.js要求可以解析react、typescript、图片、less，可以省略文件后缀，并将react依赖单独抽离

我们简单分析一下：

依据我们的描述，生成了对应的loader 需要注意的是，由于我们提了一下别的要求，有些loader并没有安装进来，稍后我们会统一补齐，还有就是关于less的处理似乎遗漏了style-loader，这个问题，在项目可以run起来后在做调整,另外使用babel-loader解析TS也有些问题
依据可以省略文件后缀的要求生成了 extensions: ['.js', '.jsx', '.ts', '.tsx']
依据抽离react依赖单的要求分别在entry和plugins中进行了处理

其实还是有些瑕疵的，但问题都不是很大，我们在自己构建这样的项目的时候，初期也不太会考虑的很周到，比如，没有进行生产环境和开发环境的区分配置等等

主要是我们的提问就很简单，感兴趣的同学可以增加更多的限制条件去试一下。

四、生成tsconfig

这个就很简单了：写一个react项目的tsconfig

这个文件也没啥好说的，之后我们看运行结果，顺便说一下，这个报错不是文件的错误，是vscode的校验，json schema的问题，之后我们补齐项目路径就好了。

1680314901357(1).png

五、处理一些bug、补齐依赖、文件夹、入口文件

除了ts解析loader的问题，由于babel无法直接解析需要一些额外的配置，这里换成ts-loader,像GPT提问 写一个webpack loader要求可以解析ts，获得答案进行修改。
使用yarn安装依赖后，补齐其他依赖，执行 yarn add url-loader css-loader less-loader style-loader -D
手动新建src目录
生成index.tsx,提问 生成react入口文件index.tsx，生成react根组件APP.tsx，当然了这俩问题可以一起问。

似乎到这里就可以运行了，我试了一下，拆包部分的代码有些问题，我修改了一下，代码如下:

module.exports = {
    entry: {
        app: './src/index.tsx',
        vendor: ['react', 'react-dom']
    },
    ...
    plugins: [
        new webpack.optimize.SplitChunksPlugin({
            chunks:'all',
            name:'vendor'
        })
    ],
};

这样就可以跑了，我们看看效果，执行npm run start

六、其他工作

基本就完成了，还剩下路由，和一些UI库的引入，这些就相对简单了，当然了这些问题也可以让AI帮忙生成，这里我就不给大家演示了。

七、总结

其实，它能做的不仅这些，接下来打算使用AI的能力，来整体的总结一下前端性能优化的问题。

最后呢，希望各位同学呢，不要跟AI对抗，也不要恐惧自己会不会失业，毕竟它只是个工具，还是抓紧时间学习起来吧。

最最后，本篇文章封面使用AI生成的哦，关键词 javascript、webpack、typescript、react

本文正在参加人工智能创作者扶持计划

使用chatGPT创建一个react前端项目

背景