React历程(一)

2018-06-27 本文已影响99人 ArthasMay

开发工具

WebStorm : tools --> Create Command-Line launcher（/usr/local/bin/webstorm) 通过sh/zsh启动WS
WS: 安装主题插件

React+Redux+Node.js仿京东首页

一、Github下载项目之后跑起来

对项目结构的整体理解和对React生态的理解

server和app是分离的,分别安装node_module的依赖包
app端：修改配置文件(package.json的启动)webpackDev服务器的host为本地IP地址

// --host<ip address> 
// webpack的dev服务器默认listen:8080端口
"webpack-dev-server --progress --profile --colors --hot  --host 192.168.30.13"

server端：依赖express模块起一个简单http服务器，项目默认listen的端口是3000，可以手动更改

1.在router/data.js文件中，更改本地图片资源的路由地址为本地ip
2.app端将所有的url组件请求地址都改成本地ip请求

好了👌，现在可以在真机上面调试react页面了

二、从零开始搭建webpack

建立目录文件和webpack设置

初始化项目文件目录
(1). config: webpack.dev.js
(2). src:项目的资源文件=>创建index.js入口文件
(3). dist:打包的出口文件夹=>创建index.html引入打包后的bundle.js文件
webpack4新特性：webpack --mode=development 能自动找到src/main.js文件打包到dist/main.js
安装webpack相关模块和配置webpack.dev.js文件

全局安装：

// 全局安装是为了使用webpack的cli（命令行工具）
// 全局安装是为了通过命令行全局调用
npm install webpack webpack-cli webpack-dev-server -g

项目安装：

// 本地安装后，通过require()引入项目中node_modules目录下的模块
npm install webpack webpack-cli webpack-dev-server --save-dev

默认下node.js会在NODE_PATH和目前js所在项目下的node_modules文件夹下去寻找模块
配置webpack.dev.js基本模块：

const path = require ("path")
module.exports = {
    //  配置入口：有且可以有多个
    entry: {
        main:["./src/index.js"]
    },
    // mode : development | production
    mode:"development",
    // 出口：有且只有一个
    output:{
      filename: "[name]-bundle.js",// bundle文件名
      path:path.resolve(__dirname,  "../dist"),//出口文件夹
      publicPath:"/"// 公共文件夹根目录
    },
    devServer:{
        contentBase:"dist",//web服务的根目录
        overlay:true,// 调试的错误浮层
        port:8080,// 本地服务端口
    }
}

3.配置loaders:
(1) package.json中配置scripts

"scripts" :  {
     "start" : "webpack-dev-server --config=config/webpack.dev.js",
     "build" : "webpack --config=config/webpack.dev.js"
}

(2) 配置css loaders

// 安装相关的loaders: css-loader将css文件引入bundle.js包内、 style-loader将css引入index.html里面
npm install style-loader css-loader

然后配置webpack.dev.js文件

module:{
     rules: [
       // css loaders
       {
           test:/\.css$/,
           use:[
               {
                 loader: "style-loader"
               },
              {
                 loader: "css-loader"
              }
          ]
       }
   ]
}

(3) 配置html loaders & image loaders

// 安装相关loader module 
npm install file-loader extract-loader html-loader

file-loader:为html文件起名
extract-loader:除了html代码，其余打包到bundle.js包内、那么extract-loader就是将html从bundle.js文件分离出来
html-loader: 找到html文件打包
流程：html-loader:找到html文件打包 => extract-loader: 将html文件从bundle.js分离 => file-loader:为文件起名
配置webpack.dev.js文件

// html loaders 
{
    test:/\.html$/,
    use:[
       { 
           loader:"file-loader",
           options:{
               name:"[name].html"
           }
       },
       {
           loader:"extract-loader"
        },
        {
           loader:"html-loader"
        }
   ]
}

//  image loaders
{
    test:/\.(jpg|gif|jpeg|png)$/,  
    use: [
       {
            loader:"file-loader",
            options: {
                name: "images/[name].ext"
            }
       }
    ]
}

注意⚠️

需要在index.js入口文件导入相关模块,webpack打包需要导入所有相关的模块

require("./src/index.html")
require("./src/main.css")

修改html loader的配置

{
    test:/\.html$/,
    use: [
       loader: "html-loader",' 
       options: {
           attrs:["img:src"]
       }
    ]
}

(4) 配置babel转换：es6转化为es5的语法，适配browers和node

安装babel-core

 // 项目安装babel-core是为了项目require到babel模块
 npm install babel-core 
 // 全局安装babel-cli是为了在终端使用babel命令
 npm install babel-cli -g

创建 .babelrc文件（json配置文件）
touch .babelrc(rc文件是unix自动加载的脚本配置文件，运行babel将自动加载.babelrc文件的配置)
安装对应的transform插件

// 箭头函数插件
npm  install babel-plugin-transform-es2015-arrow-functions

配置.babelrc文件

{
     plugins: [
        "transform-es2015-arrow-functions"
     ]
}

入口文件写测试代码:es6的箭头函数

var () => {
    console.log("Hello, world!!!")
}

babel转译js文件，可以看到转译的结果

// 需要全局安装babel-cli模块
babel ./src/mian.js

配置js loader

npm install babel-loader --save

配置webpack.dev.js

{
    test: /\.js$/,
    use: [
        {
            loader: "babel-loader"
        }
    ]，
    exclude: /node_modules/
}

(5) ponyfill & transform & preset
ponyfill: babel只能转译es6的语法，但是es6的新的API是需要靠ponyfill（垫片）来转译的

preset: babel-preset-env: 根据支持的浏览器和node环境支持的特性来转译es语法

transform-runtime: babel-runtime自动导入async => promises的语法，babel-plugin-transform-runtime是手动导入babel-runtime/regenerator这样的相关模块，转译es6之后的新的API

polyfill、babel-runtime、babel-plugin-transform-runtime三者区别: https://segmentfault.com/q/1010000012041869/a-1020000012044930

babel-preset-env 和 babel-plugin-transform-runtime配合使用

ponyfill

(1) 安装babel-polyfill

npm install babel-polyfill

(2)webpack.dev.js

entry: {
   main: ["babel-polyfill", "./src/main.js"]
}

note1: 为了打入bundle包里面的内容更少，可以按需导入转译模块："core-js/fn/promises"
note2: polyfill只能转译es6新增API，arrow funtion这类的新语法还是要用babel-plugin来转译（ex: babel-plugin-tranform-es2015-arrow-funtions）

babel-preset-env
(1)安装&配置webpack.dev.js

npm install babel-preset-env

transform（可以独立使用相关的插件or babel-plugin-tranform-runtime）

    "babel-plugin-async-to-promises": "^1.0.5",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    or 
    "babel-plugin-transform-runtime": "^6.23.0",

// webpack.dev.js配置
{
  "presets": [
    [
      "env",
      {
        "targets" : {
          "browsers" :["last 2 versions"]
        },
        "debug" : true
      }
    ]
  ], 
  "plugins" : [
      "transform-runtime"
   ]
}

总结：
babel-env-preset + babel-plugin-transform-runtime实现es6语法的转译

搭建react+webpack的脚手架

功能

express 解决后端服务
实时报错
UI开发的hot-load，这个是比客户端开发强大很大的地方，脚本语言的优势

(1) 创建开发服务器

dev server文件目录树

安装express module & 编写express.js 和 main.js服务器文件

npm install express

main.js

// 服务端若是要使用es6语法、直接引入babel-register模块
require("babel-register") 
require("./express")

express.js

// 导入express模块
import express from 'express';

// 创建启动服务器
const server = express()

// 配置启动path: build路径
const staticMiddleware = express.static("build")

server.use(staticMiddleware)

// 监听端口
server.listen(8080, () => {
    console.log("server is running...")
})

package.json

// 启动dev server
"dev": node server.main.js

webpack-dev-middleware 实现代码热更新（index.html不行）
express.js加上

// 配置自动监听web开发代码 => code变化，重新编译
const webpack = require("webpack")
const config = require("../config/webpack.dev")
const compiler = webpack(config)

const webpackDevMiddleware = require("webpack-dev-middleware")(compiler, config.devServer)

server.use(webpackDevMiddleware)

webpack-hot-middleware 实现热更新

express.js

// code热更新
const webpackHotMiddleware = require("webpack-hot-middleware")(compiler)
server.use(webpackHotMiddleware)

webpack.dev.js

devServer : {
    hot: true
}
const webpack = require("webpack")
plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

index.js|jsx

require("babel-runtime/regenerator")
require("webpack-hot-middleware/client")

nodemon 监听server & config配置

npm install nodemon -g // 全局安装
package.json
"dev": "nodemon --watch server --watch config server/main.js"

html-webpack-plugin
webpack.dev.js

// 注释html loaders里面部分代码
// {
          //   loader: "file-loader",
          //   options: {
          //      name:"[name].html"
          //   }
          // },
          // {
          //   loader: "extract-loader",
   // },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HTMLWebpackPlugin({template:"app/index.html"})
  ]

index.js or index.jsx

require("webpack-hot-middleware/client?reload=true")

webpack-mild-middleware 解决重复编译的问题
express.js

// 配置mild(解决重复编译的问题)
require("webpack-mild-compile")(compiler)

总结：
express中middleware的使用顺序