从零开始搭建React全家桶环境

最新推荐文章于 2024-09-13 15:06:03 发布
最新推荐文章于 2024-09-13 15:06:03 发布
阅读量209 收藏
点赞数
文章标签： javascript webpack json ViewUI
原文链接：https://juejin.im/post/5a715fadf265da3e5661d667
版权

博客地址：地址

Github项目地址: 地址

创建项目

 $ mkdir example
 $ cd example
 $ npm init -y复制代码

创建目录结构

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

安装Webpack

$ npm i --save-dev webpack复制代码

编写Webpack配置文件

在config目录下新建文件：

$ 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配置文件已完成

安装Babel

我们使用ES6来编写代码，所以需要安装ES6的babel-preset

$ npm i --save-dev babel-cli babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0复制代码

同时修改webpack配置文件，在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"],]
    }
  }
}复制代码

安装其他Loader

  • 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复制代码

同时修改webpack配置文件，修改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]'
  }
]复制代码

本地node服务

在server下新建server.js和index.html:

$ cd server
$ touch server.js
$ touch index.html复制代码

安装server服务依赖

$ 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.js的module.exports 的entry

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文件中添加preset

"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"
},复制代码

开始编写项目代码

安装react

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生成store,

$ 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
}
​复制代码

编写reducer

$ 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,
})
​复制代码

编写saga

$ 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并添加获取store方法，然后传递到App的props（热更新store）

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/czewail/zew…

使用问题可在Issues提出

欢迎Start


转载于:https://juejin.im/post/5a715fadf265da3e5661d667

weixin_34248487
关注
从零开始搭建一个react项目开发
08-28
主要介绍了从零开始搭建一个react项目开发,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react全家桶项目从零搭建
李小小的博客
01-23 691
现在一般大家都知道像这种MV*、MVC、MVVM框架都不能缺少强大的nodeJS，本项目依赖nodeJS、npm/cnpm、yarn管理项目，依次执行以下代码： //安装create-react-app脚手架 cnpm install -g create-react-app //查看脚手架版本号 =&gt; 确认是否安装成功 create-react-app --version //创建一个新的项...
React学习笔记（一）——React 入门
最新发布
weixin_56370772的博客
09-13 1698
了解 react 的历史背景和基本概念React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。React 是最流行的前端框架之一。对比近两年Vue 和 Angular的下载量，还有 2021 年开发者使用的 web 框架的比例，可以看到 React 是前端工程师应该必备技能之一，现在很多大厂也在使用它。
从零搭建React项目
吴文静的博客
07-29 347
React的优点：提升开发效率、代码可维护性和可阅读性增强。 JSX中onClick挂载的每个函数，都可以控制在组件范围内，不会污染全局空间。因为它使用了事件委托的方式处理点击事件，只在DOM树上添加一个事件处理函数，挂载在最顶层的DOM节点上。所有点击事件都被这个事件处理函数捕获，然后根据具体组件分配给特定函数。（JSX是JavaScript的语法扩展，让我们在JavaScript中可以编写想HTML一样的代码。React组件名第一个字母要大写。） 在React的unmount生命周期的时候，能够清除相关
从零搭建react项目
lcg_18284090173的博客
03-05 229
1，新建一个空白文件夹（本文的文件夹boke），cd到该目录，开始初始化，这里用yarn yarn init 或者 npm init -y 一路enter之后会生成一个package.json文件，内容如下： { "name": "boke", "version": "1.0.0", "description": "", "main": "index.js", "s...
从0搭建React项目
hl_java的专栏
05-20 3815
参考网址：https://www.jianshu.com/p/324fd1c124ad 看过很多react的入门文章，上面的这一篇链接是看过最的了，不过依旧会有一些跳跃，刚入门的小伙伴参照进行练习时难免会卡住，特重新整理一遍，既加强自己的记忆，又能帮助到其它小伙伴。 基础篇，搭建 项目目录创建，及必备依赖安装 （这篇文章的前提是node.js你已经安装过了，如果不会的话...
react-从零开始使用React全家桶开发电商系统
08-15
在本教程中，我们将深入探讨如何使用React全家桶来开发一个完整的电商系统。React作为一款流行的JavaScript库，已经成为构建现代Web应用的首选工具之一。它以其组件化、虚拟DOM和高效的更新策略等特性赢得了开发者们...
react-react全家桶框架
08-15
总结来说，"react-react全家桶框架"涉及到的是使用React及其周边生态工具构建一个完整的前端开发环境。从零搭建这样的框架需要理解React的组件化思想，掌握Redux的状态管理，了解React Router的路由配置，以及运用...
从零开始学习搭建React脚手架项目
12-11
准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多 react和vue,angular一样也有脚手架。这大大方便了我们的...
react全家桶.zip
11-05
总的来说，"react全家桶.zip"提供的资料涵盖了React开发的各个方面，通过系统学习，你可以从零开始成为一位熟练的React开发者。记得在实践中不断摸索，理论与实践相结合，才能真正掌握这些技术。
React全家桶(技术栈) 脚手架代码
03-29
React全家桶，通常指的是使用React库构建Web应用时所涉及的一系列相关技术和工具的集合，...使用这个脚手架，开发者可以快速搭建一个具备完整功能的React应用，无需从零开始配置这些工具，从而节省了大量的时间和精力。
React全家桶环境搭建过程详解
08-27
本篇文章主要介绍了React全家桶环境搭建过程详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
从零开始搭建react项目
weixin_45289598的博客
09-09 847
《react搭建环境》配置脚手架配置路由配置ui框架搭建react-redux 配置脚手架 npx create-react-app myapp 暴露文件 npm run eject 配置路由 npm install react-router-dom 配置ui框架 npm install antd --save 搭建react-redux 安装redux install redux --save 仅安装redux也是可以使用的，但是比较麻烦。redux里更新store里的数据，需要手动订阅(su
从0搭建一个react项目
bus_lupe的博客
07-05 196
搭建开发环境 npx create-react-app boss cd boss yarn start 删除src文件下的文件，保留index.js并新建一个APP.js App.js import React from 'react' class App extends React.Component{ render () { return <h1>Hello, React!</h1> } } export default App index.js import R
从零开始搭建一个React项目
xudakaka的专栏
12-25 591
1、初始化项目安装插件：npm init -y 2、安装webpack, 现在最流行的模块打包工具 webpackcli webpack的命令工具 webpack-dev-server - webpack官网出的一个小型express服务器，主要特性是支持热加载 webpack-merge: 引用通用的配置来组合 3、安装react相关插件： npm install react react-dom...
react 项目从零搭建
weixin_42418774的博客
10-15 346
一、查看自己的node版本，要大于等于这个v10.14.2这个 node -v //查看版本 想要管理node版本的话就去安装一个nvm，这里就不讲安装了，直接去下载安装就好。 nvm list //查看你现在的node版本列表 nvm install v10.14.2/v10.18.0(你想要的版本) //安装node新版本 nvm use 10.18.0 //切换你使用的版本 再查看后就会出现星号标示 这样就可以了。 二、安装 我是参考菜鸟教程来安装的： http.
从0开始搭建react项目
weixin_44258574的博客
02-10 745
从0开始搭建react项目
从0构建react项目（react+webpack + react-redux + react-router）
qq_42977016的博客
09-29 341
一，环境与编译器 windows + webstorm 二，参考资源 1，react搭建步骤 https://segmentfault.com/a/1190000017945643 2，完整react后台管理项目（全家桶+ant）ps：新手入手较难，但是项目很完整，值得学习 https://github.com/duxianwei520/react.git 三，开始 webpack + react 1，创建文件夹react-demo 2，执行 npm init 按照步骤填写完毕后文件夹会出现package
搭建react全家桶项目
08-18
要搭建React全家桶项目，你可以按照以下步骤进行操作： 1. 首先，你需要安装Create React App的脚手架工具。你可以使用以下命令在全局安装create-react-app：<span class="em">1</span><span class="em">2</span>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值