Reactjs开发环境入门配置

周sir | 2020年4月8日 | reactjs, web前端技术 | 0 条评论 | 1177

Create React App 是学习 React 的舒适环境，也是用 React 创建新的单页应用的常用方式。它会配好开发环境，让你用上较新的 JavaScript 特性，并给生产构建做优化。机器上需要 Node >= 8.10 和 npm >= 5.6。脚手架仓库：create-react-app。

另一条路是自己用 webpack 搭：装 loader、Babel 7、html-webpack-plugin，再写 webpack.config.js。本文按原文两条路径走一遍。

一、官方脚手架创建项目

创建并启动：

npx create-react-app my-app
cd my-app
npm start

第一行的 npx 不是拼写错误——它是 npm 5.2+ 附带的 package 运行工具。

create-react-app 创建项目时 node_modules 很大、很慢。若要建多个测试项目，建议把 node_modules 移到上级目录，后续项目可以共享。

若要顺利启动，原文还提到需要全局安装 react-scripts：

npm install -g react-scripts

package.json 里的 scripts：

 "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
 },

网络请求遇到跨域，可在 package.json 里配 proxy：

//package.json
{
  "name": "reactapp",
  "version": "0.1.0",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
    
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy":"http://192.168.0.100"  //代理配置
}

方式	命令 / 配置	注意
脚手架	`npx create-react-app my-app`	依赖 Node≥8.10、npm≥5.6
启动	`npm start`	scripts 走 react-scripts
跨域	package.json 的 “proxy”	开发服务器转发

二、webpack 手动构建

项目目录结构如下：

安装依赖

webpack 相关包本地安装：

npm i -D webpack webpack-cli  webpack-dev-server

reactjs 相关包：

npm i -D react react-dom

babel 解析包（这里用 7.0）：

npm install -S babel-loader @babel/core

解析 ES6 和 JSX 的插件：

npm install -S @babel/preset-react  @babel/preset-env

注：以前编译 ES6 以上语法用的是 babel-preset-es2015。babel-preset-env 更可定制：指定要兼容的浏览器版本，Babel 只编译该版本不支持的语法，而不是全部打成旧语法。

html-webpack-plugin 把打包后的 bundle.js 自动写进 index.html 模板：

npm i  -D html-webpack-plugin

其它相关包：

npm install file-loader url-loader --save //加载图片资源

npm install style-loader css-loader --save  //css-loader用于将css转换成对象，而style-loader则将解析后的样式嵌入js代码

npm install postcss-loader --save //检查CSS（像eslint检查js那样）、添加浏览器前缀（该平台目前最火的插件）
使用未来的CSS语法（大概就像现在的花呗？？）、函数式语法（类似Sass语法）等等

npm install autoprefixer precss postcss-flexbugs-fixes --save //注：autoprefixer是自动添加浏览器前缀的插件，precss是类似Sass语法的css插件，postcss-flexbugs-fixes是修复了flex布局bug的插件

webpack.config.js 参考

const path = require('path'); //nodejs内置模块
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //本地服务
    devServer: {
        contentBase: path.join(__dirname, "public"),
        compress: true,
        port: 9000,
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    },
    //入口
    entry: './src/index.js',
    //出口
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js' // d://webpakc/dist/bundle.js
    },
    //loaders
    module: {
        rules: [{
            test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
            exclude: /node_modules/,
            loader: 'babel-loader', //使用的加载器名称
            query: { //babel的配置参数，可以写在.babelrc文件里也可以写在这里
                presets: ['@babel/preset-env', '@babel/preset-react']
            }
        }]
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: __dirname + "/index.html"
        }),
    ]
}

package.json 参考

{
  "name": "03webpack-react-demo1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules\\.bin\\webpack --mode development",
    "start": "node_modules\\.bin\\webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.0.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0"