react+express项目

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设置

《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 buildnpm 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
    原文作者:_jingjing
    原文地址: https://segmentfault.com/a/1190000017472925
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞