Создайте среду корзины семейства React с нуля

React.js

адрес блога:адрес

Адрес проекта на гитхабе:адрес

Создать проект

 $ mkdir example
 $ cd example
 $ npm init -y

Создайте структуру каталогов

├── config              // webpack配置文件目录
├── package.json        
├── server              // 开启本地node服务文件，包括热更新等
└── src                 // 源文件目录

Установить вебпак

$ npm i --save-dev webpack

Написание файла конфигурации Webpack

Создайте новый файл в каталоге конфигурации:

$ cd config
$ touch webpack.config.dev.js
$ touch webpack.config.pro.js

Давайте сначала напишем среду разработкиwebpack.config.dev.js

const path = require('path')
const webpack = require('webpack')
​
// 先定义一些路径
// 配置文件夹路径
const CONFIG_PATH = path.resolve(__dirname)
// 源码文件夹路径
const APP_PATH = path.resolve(CONFIG_PATH, '../src')
// 应用入口文件
const APP_FILE = path.resolve(APP_PATH, 'index.js')
// 打包目录文件夹路径
const BUILD_PATH = path.resolve(ROOT_PATH, '../dist')
​
module.exports = {
  // 入口
  entry: APP_FILE,
  // 输出
  output: {
    // 告诉Webpack结果存储在哪里
    path: BUILD_PATH,
    // 打包后的文件名
    filename: 'bundle.js',
    //模板、样式、脚本、图片等资源对应的server上的路径
    publicPath: "/assets/",
  }
}

Завершен один из простейших конфигурационных файлов webpack

Установить Бабель

Мы используем ES6 для написания кода, поэтому нам нужно установить ES6 babel-preset

$ npm i --save-dev babel-cli babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

В то же время измените файл конфигурации веб-пакета, вmodule.exportsУвеличивать:

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

Добавьте файл babelrc в корневой каталог

cd /path/to/example
touch .babelrc

Изменить .babelrc

{
  "env": {
    "development": {
      "presets" : ["es2015", "stage-0", "react"],
    },
    "production": {
      "presets" : [["es2015", { "modules": false, "loose": true }], "stage-0", "react"],]
    }
  }
}

Установить другие загрузчики

  • css-loader

  • style-loader

  • postcss-loader

  • less-loader

  • file-loader

  • url-loader

  • autoprefixer

npm i --save-dev css-loader style-loader file-loader less less-loader postcss-loader url-loader autoprefixer

В то же время измените файл конфигурации веб-пакета, изменитеmodule.exportsвнизmodule.rules:

rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader"
  },
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: (loader) => [
            require('autoprefixer')()
          ]
        }
      }
    ]
  },
  {
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: (loader) => [
            require('autoprefixer')()
          ]
        }
      },
      'less-loader'
    ]
  },
  {
    test: /\.(eot|woff|ttf|woff2|svg|gif)(\?|$)/,
    loader: 'file-loader?name=[hash].[ext]'
  },
  {
    test: /\.(png|jpg)$/,
    loader: 'url-loader?limit=1200&name=[hash].[ext]'
  }
]

служба локального узла

Создайте новые server.js и index.html под сервером:

$ cd server
$ touch server.js
$ touch index.html

Установить зависимости службы сервера

$ npm i --save express

Измените файл server.js

const app = new (require('express'))()
// 本地预览代码的端口
const port = 3003
​
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/index.html')
})
​
app.listen(port, function(error) {
  if (error) {
    /*eslint no-console: 0*/
    console.error(error)
  } else {
    /*eslint no-console: 0*/
    console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

Завершен простейший локальный сервис предпросмотра

Горячее обновление

Мы используемreact-hot-loaderсделать горячее обновление,webpack-dev-middlewareа такжеwebpack-hot-middlewarefобновить страницу в режиме реального времени

Установить зависимости

$ npm i --save-dev react-hot-loader webpack-dev-middleware webpack-hot-middleware

написать index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=contain"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body ontouchstart="">
  <div id="app"></div>
  <script src="/assets/bundle.js"></script>
</body>
</html>
​

Изменить server.js

const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const config = require('../config/webpack.config.dev.js')
const app = new (require('express'))()
// 本地预览代码的端口
const port = 3003
​
const compiler = webpack(config)
​
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
}))
​
app.use(webpackHotMiddleware(compiler))
​
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/index.html')
})
​
app.listen(port, function(error) {
  if (error) {
    /*eslint no-console: 0*/
    console.error(error)
  } else {
    /*eslint no-console: 0*/
    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

Изменить webpack.config.dev.jsmodule.exportsВход

entry: [
    'react-hot-loader/patch',
    // 这里reload=true的意思是，如果碰到不能hot reload的情况，就整页刷新。
    'webpack-hot-middleware/client?reload=true',
    APP_FILE
],

В module.exports добавьте:

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development') //定义编译环境
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
],

Добавить пресет в файл babelrc

"plugins" : ["react-hot-loader/babel"]

.babelrc

Окончательный код:

{
  "env": {
    "development": {
      "presets" : ["es2015", "stage-0", "react"],
      "plugins" : ["react-hot-loader/babel"]
    },
    "production": {
      "presets" : [["es2015", { "modules": false, "loose": true }], "stage-0", "react"],
    }
  }
}
​

webpack.config.dev.js

Окончательный код:

/**
 * @author Chan Zewail
 * ###### Thu Jan 25 19:28:40 CST 2018
 */
const path = require('path')
const webpack = require('webpack')
​
// 先定义一些路径
// 配置文件夹路径
const CONFIG_PATH = path.resolve(__dirname)
// 源码文件夹路径
const APP_PATH = path.resolve(CONFIG_PATH, '../src')
// 应用入口文件
const APP_FILE = path.resolve(APP_PATH, 'index.js')
// 打包目录文件夹路径
const BUILD_PATH = path.resolve(ROOT_PATH, '../dist')
​
module.exports = {
  entry: [
    'react-hot-loader/patch',
    // 这里reload=true的意思是，如果碰到不能hot reload的情况，就整页刷新。
    'webpack-hot-middleware/client?reload=true',
    APP_FILE
  ],
  output: {
    // 告诉Webpack结果存储在哪里
    path: BUILD_PATH,
    // 打包后的文件名
    filename: 'bundle.js',
    //模板、样式、脚本、图片等资源对应的server上的路径
    publicPath: "/assets/",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: (loader) => [
                require('autoprefixer')()
              ]
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: (loader) => [
                require('autoprefixer')()
              ]
            }
          },
          'less-loader'
        ]
      },
      {
        test: /\.(eot|woff|ttf|woff2|svg|gif)(\?|$)/,
        loader: 'file-loader?name=[hash].[ext]'
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=1200&name=[hash].[ext]'
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development') //定义编译环境
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  resolve: {
    //后缀名自动补全
    extensions: ['.js', '.jsx', '.less', '.scss', '.css'], 
    // 根路径别名
    alias: {
      '@': `${APP_PATH}/`,
    },
    modules: [
      'node_modules',
      'src',
    ]
  }
}
​

команда сценария npm

Установите некоторые зависимости инструмента

npm i --save-dev copyfiles clean-webpack-plugin

В package.json добавьте:

"scripts": {
    "dev": "node server/server.js",
    "start": "npm run dev",
    "copy": "copyfiles -f ./server/index.html ./dist",
    "build": "npm run copy && webpack --config config/webpack.config.pro.js"
},

Начать кодирование проекта

установить реагировать

npm i --save react react-dom

входной файл

$ cd src
# 入口文件
$ touch index.js
# 应用文件
$ touch App.js

написать index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
// 应用文件
import App from './App'
​
ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>
  , document.getElementById('app'))
​
// 热更新
if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default
    ReactDOM.render(
      <AppContainer>
        <NextApp/>
      </AppContainer>,
      document.getElementById('app')
    )
  })
}

семейное ведро

  • react

  • react-dom

  • react-router

  • redux

  • redux-saga

  • redux-persist

  • history

  • redux-logger

  • react-router-redux

npm i --save react-router redux redux saga reux-persist history redux-logger react-router-redux

Напишите configureStore для создания хранилища,

$ cd src
$ mkdir store
$ touch index.js
/**
 * @author Chan Zewail
 * ###### Thu Jan 25 19:28:40 CST 2018
 */
import { createStore, applyMiddleware, compose } from 'redux'
import { persistStore } from 'redux-persist'
import reducers from '@/reducers'
import createHistory from 'history/createHashHistory'
import { routerMiddleware } from 'react-router-redux'
import createSagaMiddleware from 'redux-saga'
import sagas from '@/sagas'
import logger from 'redux-logger'
​
// 创建history
export const history = createHistory()
​
//创建saga中间件
const sagaMiddleware = createSagaMiddleware()
​
// 需要调用的中间件
const middleWares = [
  sagaMiddleware,
  routerMiddleware(history),
  logger
]
​
// 生成store
const store = createStore(reducers, undefined, compose(
  applyMiddleware(...middleWares),
))
​
// 将store数据保存到缓存
const persistor = persistStore(store, null)
​
// 生成最终的store函数
export default function configureStore(){
  // 运行saga
  sagaMiddleware.run(sagas)
  return { persistor, store }
}
​
export function getPersistor() {
  return persistor
}
​

писать редукторы

$ cd src
$ mkdir reducers
$ touch index.js
/**
 * @author Chan Zewail
 * ###### Thu Jan 25 19:28:40 CST 2018
 */
import { routerReducer } from 'react-router-redux'
import { persistCombineReducers, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
// import xxxReducer from './xxx'
​
// redux-persist 配置
export const config = {
  key: 'root',
  storage,
  debug: true,
  // 将对应reducer保存到本地缓存的白名单
  whitelist: [
    'routing',
  ]
}
​
​
// 合并reducer
export default persistCombineReducers(config, {
  routing: routerReducer, // 默认引入路由reducer
  // xxx: xxxReducer,
})
​

написать сагу

$ cd src
$ mkdir sagas
$ touch index.js
/**
 * @author Chan Zewail
 * ###### Thu Jan 25 19:28:40 CST 2018
 */
import { fork, all } from 'redux-saga/effects'
// import xxxSagaFlow from './xxxFlow'
​
// 根saga
export default function* rootSaga () {
  yield all([
    // fork(xxxSagaFlow)
  ])
}
​

App.js

/**
 * @author Chan Zewail
 * ###### Thu Jan 25 19:28:40 CST 2018
 */
import React from 'react'
import { Provider } from 'react-redux'
import { history } from '@/store'
import { ConnectedRouter } from 'react-router-redux'
import { PersistGate } from 'redux-persist/es/integration/react'
import { Redirect } from 'react-router-dom'
​
// persister 缓存恢复前调用的方法
const onBeforeLift = () => {
  // console.log('before action')
}
​
class App extends React.Component {
  constructor(props) {
    super(props)
  }
​
  render() {
    const { persistor, store } = this.props.stores
    // 主页面
    return (
      <Provider store={store}>
        <PersistGate loading={<div/>} onBeforeLift={onBeforeLift} persistor={persistor}>
          <ConnectedRouter history={history}>
            // switch and route
          </ConnectedRouter>
        </PersistGate>
      </Provider>
    )
  }
}
​
export default App
​

Измените index.js и добавьте метод получения хранилища, а затем передайте его в реквизиты приложения (хранилище горячих обновлений).

index.js

/**
 * @author Chan Zewail
 * ###### Thu Jan 25 19:28:40 CST 2018
 */
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import configureStore from '@/store'
// 主页面
import App from './App'
​
export const stores = configureStore()
​
ReactDOM.render(
  <AppContainer>
    <App stores={stores}/>
  </AppContainer>
  , document.getElementById('app'))
​
// 热更新
if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default
    ReactDOM.render(
      <AppContainer>
        <NextApp stores={stores}/>
      </AppContainer>,
      document.getElementById('app')
    )
  })
}
​

наконец

Была создана самая простая корзина семейства React, и другие функции могут быть постепенно добавлены и настроены.

Окончательный код:GitHub.com/винить постороннего/ за…

Вопросы по использованию можно найти наIssues


Категории