express+react

1 开发环境准备(windows)#

1.1 安装nodejs和npm#

命令行输入以下命令,查看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配置

  • 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为例。新增admin.js入口文件
需修改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',
        ]
    }
复制代码

 

修改entry

  • 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 buildnpm run analyz,浏览器会自动打开127.0.0.1:8888,如下页面,可查看打包后文件分布,以及打包文件大小。

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分别是不同的入口。

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

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

  本文中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组件结构

2.5.2 chrome下的source map

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

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

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

posted @ 2020-06-16 11:01  韦书文  阅读(1368)  评论(3编辑  收藏  举报