Reactjs开发环境入门配置

作者: 橙赎 | 来源:发表于2020-04-10 16:47 被阅读0次

Reactjs开发环境入门配置
Python开发第一天
Reactjs+webpack2+ES6环境配置
golang快速入门[4]-go语言如何编译为机器码
golang快速入门[5.3]-go语言是如何运行的-内存分配
golang快速入门[5.2]-go语言是如何运行的-内存概述
golang快速入门[5.1]-go语言是如何运行的-链接器
Windows开发环境 Meteor + MongoDB 独立环
reactjs 基础环境配置
golang快速入门[6.1]-集成开发环境-goland详解

1. 官方脚手架创建项目

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：

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

注意

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

create-react-app创建项目时， node_modules安装包较多，需要花费很长时间，如果用它创建多个测试项目，建议将node_modules移至上级目录，后续项目都可以共享node_modules.

如果要成功启动项目还需全局安装react-scripts,

npm install -g react-scripts

package.json

 "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"  //代理配置
}

2. 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会选择编译该版本不支持的语法而不是全部编译成旧的语法，具体配置参见：babel-preset-env
模板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"}