手动新建一个React项目

Gästebuch

之前在项目开发时，都是直接使用脚手架工具创建项目，不管是React提供的create-react-app还是Vue提供的vue-cli，或者公司提供的更完备脚手架工具。这样虽然省事，但是很多细节就被隐藏起来了，不接触的话就完全不了解，尤其是不新建项目的话，一些配置都是配好了的，只需要写写业务代码，而对前端开发人员来说，最有难度也最核心的工程化技术就没能接触。因此，很有必要不借助任何脚手架工具，直接从0开始新建一个项目，思考涉及到哪些工具，都用来做什么，分别需要怎么配置。我自己对React更熟一些，所以就以React项目来走一遍。

npm init新建一个项目不用多说了，然后直接npm install react react-dom，把框架库安装上。有了库，就直接开始撸代码，./index.js作为入口文件，创建src目录作为业务代码文件夹，src/app.jsx, src/app.scss写一个最简单的helloword页面，这里使用了预编译CSS的方案sass，主要是为了解决CSS命名冲突和模块化的问题。同时，还需要一个html文件作为展示页面，新建public目录，写一个最简单的html，确保body里有个id为root的div即可，这是一个前端SPA项目的最简单demo，页面代码到这里就写完了。

接下来就是编译这个重头戏，新建一个webpack.config.js来进行webpack配置。input和output配置项不用多说，比较重要的就是在module.rules里配置对js、jsx、scss文件的解析规则，如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
rules: [{
               test: /\.js$|\.jsx$/,
               use: 'babel-loader',
               exclude: /node_modules/
           },

           {
               test: /\.scss$/,
               use: ['style-loader', 'css-loader', 'sass-loader'],
               exclude: /node_modules/
           }
       ]

因为react项目里使用jsx来编写界面，而jsx是需要借助babel来编译成可执行的js代码，因此需要新建一个.babelrc文件，里面放上”@babel/preset-env”, “@babel/preset-react”就可以了，把上面牵扯到的全部用npm add –dev安装上。做完这些，往package.json的scripts里加个build命令，例如”build”: “webpack –mode production”，就可以编译一下看看了。可能会有一些报错，根据具体的报错提示来进行解决就可以了，比如sass没安装，nodejs版本与webpack不匹配等等，问题解决掉就能编译成功了。最后当然是需要能够开发调试，在webpack.config.js里加上devServer配置，往package.json里scripts加上”start”: “webpack-dev-server –port 3000 –open –hot –mode development”，就能开启调试了。

到这里，从0开始新建一个React项目并且支持调试和编译就完成了，虽然实际工作中的项目比这样的helloword的demo要复杂很多，但都是一个又一个具体的问题，只需要遇到的时候认真学习并记录一下，就没什么难的，重要的是掌握思路和原理。

Inhalte