react+express项目

hline

2020-01-06

关注关注

1 开发环境准备（windows）

1.1 安装nodejs和npm

1) 下载nodejs安装包：http://nodejs.org/en/download/
nodejs安装时会同时安装npm
2) 安装完成后检查是否安装成功

命令行输入以下命令，查看npm和node版本：
npm -v
node -v

若未安装成功可检查环境变量是否安装时自动设置成功

1.2 安装create-react-app(react官方提供的脚手架)

命令行输入：npm install -g create-react-app

create-react-app：可以用来快速创建react项目
-g：全局安装create-react-app脚手架工具，这个步骤只需要执行一次

1.3 安装express-generator(express官方提供脚手架)

命令行输入： npm install express-generator -g

express-generator：可以用来快速创建express应用
-g：全局安装express-generator脚手架工具，这个步骤只需要执行一次

2 创建react+express项目

前端框架：react
服务端：基于node的express框架

两者结合快速创建web项目。由于服务端代码需要部署到服务器，为了方便操作，先创建react项目，然后在react项目目录下创建express项目，将react的打包目录设置为express项目下的public文件。

(1)创建react项目（client）

create-react-app myapp

(2)创建express项目（server）

cd myapp
express-generator --view=ejs server

添加模版引擎：--view=ejs，此处选择ejs作为模版引擎。还可以选择pub、jade等其它模版引擎

2.2 react初始项目目录结构

使用create-react-app创建的项目，已经把webpack、babel等配置都封装到依赖项目react-script中，因此在目录外层无法看到webpack等配置文件。

1）自动生成的项目目录介绍
- A. node_modules：项目依赖包目录，使用npm install xxx相关命令安装的依赖都会自动下载到该目录，无需提交至git；
- B. public：公共目录，该目录下的文件都不会被webpack进行加载、解析和打包；通过npm run build进行打包时该目录下的所有文件将会直接被复制到build目录下；
  - a) favicon.ico：网站图标（可替换删除）
  - b) index.html：页面模板，webpack打包后将输出文件引入到该模板内；index.html中通过环境变量%PUBLIC_URL%指向public目录路径；
  - c) manifest.json：PWA将应用添加至桌面的功能的实现依赖于manifest.json。通过manifest.json文件可以对
- C. src: 是源码目录，该目录下除了index.js App.test.js registerServiceWorker.js 文件具有一定意义其余文件都是演示使用可直接删除。
  - a) index.js: 是整个项目的入口文件，也是webpack打包的入口文件；
  - b) App.js：项目创建后，可通过修改此文件来修改页面内容
  - c) App.test.js: 测试单元演示文件，暂时并不知道干嘛用；可以直接删除；
  - d) registerServiceWorker.js: service worker 是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务；registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的service worker 只在生产环境中生效，并且该功能只有在https下才能有效果；
- D. .gitignore: 该文件是github过滤文件配置，即指定无需提交至git而忽略的文件，帮助查看方式，git help ignore
- E. README.md: 该文件是描述文件
- F. package.json: 定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。部分依赖模块被隐藏；
- G. package.lock.json: 每次通过npm添加依赖或者更新包版本时 npm都会把相关版本信息写入package.lock.json文件；
2）package.json配置

react+express项目

3）可用脚本命令说明

首先说明：通过npm run 执行下面命令实际上是运行 node_modules/react-srcipt/script下对应的脚本文件；

A.npm run start : 开始项目，通过http://localhost:3000 可访问项目；
B. npm run build : 项目打包，在生产环境中编译代码，并放在build目录中；所有代码将被正确打包，并进行优化、压缩同时使用hash重命名文件；执行该命令前需要在package.json中新增条配置"homepage": "."（上面配置文件已给出）, 同时build后的项目需要在服务器下才能访问；否则打开的将是空白页面；
C. npm run test : 交互监视模式下启动测试运行程序；
D. npm run eject : 将隐藏的配置导出；需要知道的是create-react-app脚手架本质上是使用react-scripts进行配置项目，所有配置文件信息都被隐藏起来(node_modules/react-scripts)；当需要手动修改扩展webpack配置时有时就需要将隐藏的配置暴露出来；特别需要注意的是该操作是一个单向操作，一旦使用eject，那么就不能恢复了(再次将配置隐藏)；

2.3 react项目配置

create-react-app默认生成的是单入口单出口生产环境，统一通过react-script进行管理，无法满足复杂的多入口项目的需要，因此需要对项目进行配置，使其满足实际项目需要。可通过npm run eject来暴露所有内建配置，以方便我们对项目的配置进行修改。

2.3.1 npm run eject

进入myapp根目录，执行以下命令：npm run eject。暴露所有内建配置，项目下会新增或对部分配置文件进行修改。
根目录下新增config（配置文件）和script（脚本文件）目录。

注意：此操作不可逆，一旦执行无法回退；
修改配置的其它方法：也可考虑采用react-app-rewired插件来实现配置覆盖。

2.3.2 多入口配置

项目默认只有index.js（src目录下）这一个入口文件。

以在src目录下新增入口文件admin.js为例。 react+express项目
需修改config中的配置文件来：

1）修改webpcak.config.dev.js文件
A. 修改entry（新增js文件入口配置）

//这里我已经写成对象格式了
//有多少个页面就添加多少个key:value
//这里我已经添加了一个admin
//数组中的paths.appSrc+‘/admin.js‘就是这个html页面的入口文件
    entry: { 
        index:[
            require.resolve(‘./polyfills‘),
            require.resolve(‘react-dev-utils/webpackHotDevClient‘),
            paths.appIndexJs,
        ],
        admin:[
            require.resolve(‘./polyfills‘),
            require.resolve(‘react-dev-utils/webpackHotDevClient‘),
            paths.appSrc + ‘/admin.js‘,
        ]
    }

react+express项目

B. 修改plugins中的HtmlWebpackPlugin(配置html模版文件)

//多少个页面就new 多少个 HtmlWebpackPlugin 
//并且在每一个里面的chunks都需要和上面的entry中的key匹配
//例如上面entry中有index和admin这两个。
//这里的chunks也需要是index和admin
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["index"],
        template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["admin"],
        template:paths.appHtml,
        filename:‘admin.html‘
    }),

C.修改output

//由于原配置入口文件只有一个，因此output中的filename是写死的，
//增加多入口之后，输出文件名被写死，对应生成了多个boundle.js，
//后面生成的会覆盖前面生成的文件，所以需要制定输出的文件名不能写死
output: {
    path:paths.appBuild,
    pathinfo: true,
    filename: ‘static/js/[name].bundle.js‘,
    chunkFilename: ‘static/js/[name].chunk.js‘,
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
    path.resolve(info.absoluteResourcePath).replace(/\\/g, ‘/‘),
 },

2）修改config下webpack.config.prod.js文件
A 修改entry

//这里的paths.appIndexJs和paths.appSrc+‘/admin.js‘是入口文件
    entry:{
        index:[
            require.resolve(‘./polyfills‘), 
            paths.appIndexJs
        ],
        admin:[
            require.resolve(‘./polyfills‘),
            paths.appSrc+‘/admin.js‘
        ]
    }

B 修改plugins中的HtmlWebpackPlugin

//和开发环境下一样，多少个html就new多少个 HtmllWebpackPlugin，每个都需要指定chunks,并且指定filename，在minify中配置是否压缩js、css等，这是生产环境下的配置
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["index"],
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["admin"],
      template: paths.appHtml,
      filename:‘admin.html‘,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),

3）在开发环境中如果想通过地址访问不同页面，需要修改webpackDevServer.config.js
A 修改historyApiFallback

//这里的rewrites:[ {from: /^\/admin.html/, to: ‘/build/admin.html‘ }] 数组里面是一个个对象，
//对象中前面的值是在开发时候访问的路径，例如 npm run start之后会监听 localhost:3000 ，
//此时在后面加上 /admin.html就会访问admin.html中的内容，默认是访问index.html；
//数组中的第二个值是生产环境下的文件的路径。
//如果有很多页面，就在rewrites中添加更多对象
    historyApiFallback: {
      disableDotRule: true,
      rewrites: [
        { from: /^\/admin.html/, to: ‘/build/admin.html‘ },
      ]
    },

2.3.3 前端跨域问题配置

生产环境：本文中的项目，由于打包后的代码会放在server目录下的public文件夹下，也就是打包后的代码和server在同域下，不存在跨域问题。
开发环境：开发时，前端react项目和后端express项目运行时端口端口不同，存在跨域问题。

开发环境跨域问题解决办法：在package.json中加入："proxy":http://localhost:5000 //后端所在域。
如果需要后端存在多个域：

//package.json中加入
 "proxy": {
     "/api1": {
         "target": "http://api1.xxxx.com",
         "changeOrigin":true
     },
     "/api2":{
         "target":"http://api2.xxxx.com",
         "changeOrigin":true
     }
 }

2.3.4 文件路径简化配置

当页面嵌套过深时，import Apis from ‘../../common/apis‘，可通过webpack配置来简化路径。

//修改webpack.config.dev与webpack.config.prod两个文件，加入相同配置
//增加方法
function resolve(dir) { 
    return path.join(__dirname, ‘..‘, dir) 
}
//修改 alias配置
alias: {
     ‘react-native‘: ‘react-native-web‘, 
    //加入配置
     ‘@src‘: resolve(‘src‘)
}

添加上述配置后，引入文件方式：import Apis from ‘@src/common/apis‘

缺点：此方法能简化引用方法，但无法通过快捷键进入该引用文件。

2.3.5 webpack打包体积详情分布

1）安装：npm install –save-dev webpack-bundle-analyzer
2）配置：

//修改webpack.prod.conf.js文件，增加如下内容
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
//修改package.json文件，在scripts中增加如下命令
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

3）运行npm run build或npm run analyz，浏览器会自动打开127.0.0.1:8888，如下页面，可查看打包后文件分布，以及打包文件大小。

react+express项目

2.3.6 webpack构建打包优化

1）使用UglifyJSPlugin压缩js文件

安装方法: npm install uglifyjs-webpack-plugin --save-dev

在webpack.config.prod.js文件中添加

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)
module.exports = {
    plugins: [
           new UglifyJSPlugin(),
     ]
}

2）生产环境去掉map文件：缩短build时间

//修改webpack.config.prod.js文件：
//注释devtool:shouldUseSourceMap? ‘source-map‘:false
devtool:false,//增加
3）添加cache-loader，减少打包时间
//修改webpack.config.dev.js文件：
module:{
    rules:[{
      use:[
              //添加在最前面
          ‘cache-loader‘, 
      ]
    }]
}

在其它加载程序加载之前添加以将结果缓存在磁盘上

4）提取公共包：提取多个入口引入的公共依赖包

修改webpack.config.prod.js文件

//修改entry文件，
entry: 
//这里的paths.appIndexJs和paths.appSrc+‘/admin.js‘依然是每个html的入口文件
{
       index:[
           require.resolve(‘./polyfills‘),
           paths.appIndexJs,
        ],
        admin:[
            require.resolve(‘./polyfills‘),
            paths.appSrc+‘/admin.js‘
        ],
        //增加vendor
        vendor:[‘react‘,‘react-dom‘]
},
//修改plugin
plugin:{
    //新增以下代码
    new webpack.optimize.CommonsChunkPlugin({
      name: ["vendor"],
      // filename:‘static/js/vendor.[chunkhash:8].js‘,
      // minChunks: 3  //三方库在逻辑代码中被调用两次(数字可以自定义)， 将公共的代码提取出来
    }),
/* 防止 vendor hash 变化 */
  // extract webpack runtime and module manifest to its own file in order to
  // prevent vendor hash from being updated whenever app bundle is updated
  new webpack.optimize.CommonsChunkPlugin({
    name: ‘manifest‘,
    chunks: [‘vendor‘]
  }),
}
//修改plugins中的HtmlWebpackPlugin，在chunks中添加需要引入的公共包，
//其中公共包需放在后面，使其在加入html页面时能在其它js文件前面 
new HtmlWebpackPlugin({    inject: true,    chunks:["index","vendor"],    template: paths.appHtml,    minify: {        removeComments: true,        collapseWhitespace: true,        removeRedundantAttributes: true,        useShortDoctype: true,        removeEmptyAttributes: true,        removeStyleLinkTypeAttributes: true,        keepClosingSlash: true,        minifyJS: true,        minifyCSS: true,        minifyURLs: true,    },}),new HtmlWebpackPlugin({    inject: true,    chunks:["admin","vendor"],    template: paths.appHtml,    filename:‘admin.html‘,    minify: {        removeComments: true,        collapseWhitespace: true,        removeRedundantAttributes: true,        useShortDoctype: true,        removeEmptyAttributes: true,        removeStyleLinkTypeAttributes: true,        keepClosingSlash: true,        minifyJS: true,        minifyCSS: true,        minifyURLs: true,    },}),

2.3.7 build命令

命令行输入：npm run build，出现以下文件夹，其中admin.html和index.html分别是不同的入口。
react+express项目

2.3.8 修改build后资源文件根路径

可在path.js文件中修改打包后资源文件路径，例如修改path.js文件中getServedPath方法中的‘/’，改为‘/build’，则打包后资源文件的路径会加上build，修改前资源文件路径中是没有build的。 react+express项目

本文中react+express的项目，无需修改资源文件根路径，因为express会配置资源文件所在目录为。

2.4 express项目配置（与react结合）

2.4.1 nodemon热启动

express框架中启动项目后，文件更新后需要手动重启node服务，修改才会生效。使用nodemon可以实现热启动，文件修改后自动重启使修改生效。
在server根目录（express项目根目录）下运行以下命令，安装nodemon：
npm --save-dev install nodemon

//修改server（express项目根目录）目录下的package.json文件，将node改为nodemon
//将"start":"node ./bin/www"改为：
"start":"nodemon ./bin/www"

2.4.2 react打包目录相关修改

为了方便，将react打包目录修改为server目录下public目录，可以避免每次打包后都需要将build目录下的文件在复制到server目录下。

//修改path.js文件，module.exports中的appBuild变量
//将appBuild: resolveApp(‘build‘),改为
appBuild: resolveApp(‘server/public‘),

2.4.3 在react的package.json中增加server的启动命令

在webstorm中，会自动出现根目录下package.json中的scripts下的npm命令，为了方便启动server，可在react 根目录下的package.json文件中增加server的启动项。

"scripts": {
    "start": "node scripts/start.js",
    "server-start": "cd server && npm run start",//增加server启动命令
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

2.5 react开发调试工具

2.5.1 react-developer-tools

浏览器扩展工具中搜索此插件并安装，可以查看到react组件结构 react+express项目

2.5.2 chrome下的source map

chrome引入了source-map文件，可以查看打包前代码。唯一要做的就是配置webpack自动生成source-map文件，这也很简单，在webpack.config.js中增加一行配置即可（需要重新启动webpack-dev-server使配置生效），create-react-app已做此配置，因此不需要再修改。
react+express项目

2.5.3 Eslint(javascript代码检查工具)

Create-react-app已安装Eslint，可对eslint进行自定义配置规则。

2.6 项目目录结构优化

2.6.1 react项目目录结构优化

开发目录主要是src目录，因此需要修改的目录主要是src目录。

|——src
|————|common //公共组件目录，如http.js、cookie.js等
|————|components //基础组件、业务组件、业务代码抽象出的一些基础类，例如每个页面可以在此目录下建立一个文件存放相关组件。
|————|layouts //布局相关组件及其样式文件，如header.js、footer.js、menu.js等
|————|styles //公共样式文件
|————|static //公共的静态资源文件，如公共的图片资源文件等
|————|views //页面入口文件，可与comonents中的页面组件对应

如果使用了router和redux可在src下增加目录：

redux：redux应用数据状态管理文件，包括actions、reducers、stores三个子目录
routes：路由管理模块
containers：应用根容器，用于连接redux和router

react+express项目

2.6.2 express项目目录结构优化

|——server // express项目根目录
|————|bin 
|——————|www  //服务器相关配置文件
|————|controllers //控制器层，处理前端请求
|————|models //数据库操作相关文件
|————|node_modules //npm包安装目录
|————|public //react打包目录，存放所有的html，js/css/图片等资源文件
|————|routes // 路由文件目录
|——————|api.js //api请求路由文件
|——————|pages.js // 页面请求路由文件
|————|utils // 公共文件目录
|——————|config.js //各种常量或公共方法
|——————|db.js // 数据库访问方法封装
|——————|http.js //http请求方法封装
|————|views // express框架自带，由于打包后的文件全放在public目录下，因此这个文件可不用了
|————|app.js //入口文件
|————|package.json 
|————|package-lock.json

转自思否，原链接https://segmentfault.com/a/1190000017472925，原作者_jingjing

hline

0 关注 0 粉丝 0 动态

关注关注

安科网

react+express项目

hline

1 开发环境准备（windows）

1.1 安装nodejs和npm

1.2 安装create-react-app(react官方提供的脚手架)

1.3 安装express-generator(express官方提供脚手架)

2 创建react+express项目

(1)创建react项目（client）

(2)创建express项目（server）

2.2 react初始项目目录结构

2.3 react项目配置

2.3.1 npm run eject

2.3.2 多入口配置

2.3.3 前端跨域问题配置

2.3.4 文件路径简化配置

2.3.5 webpack打包体积详情分布

2.3.6 webpack构建打包优化

2.3.7 build命令

2.3.8 修改build后资源文件根路径

2.4 express项目配置（与react结合）

2.4.1 nodemon热启动

2.4.2 react打包目录相关修改

2.4.3 在react的package.json中增加server的启动命令

2.5 react开发调试工具

2.5.1 react-developer-tools

2.5.2 chrome下的source map

2.5.3 Eslint(javascript代码检查工具)

2.6 项目目录结构优化

2.6.1 react项目目录结构优化

2.6.2 express项目目录结构优化

hline

hline