react+express项⽬
1 开发环境准备（windows）
1.1 安装nodejs和npm
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.st.js registerServiceWorker.js ⽂件具有⼀定意义其余⽂件都是演⽰使⽤可
直接删除。
a) index.js: 是整个项⽬的⼊⼝⽂件，也是webpack打包的⼊⼝⽂件；
b) App.js：项⽬创建后，可通过修改此⽂件来修改页⾯内容
c) st.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 : 开始项⽬，通过: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为例。
需修改config中的配置⽂件来：
1）修改fig.dev.js⽂件
A. 修改entry（新增js⽂件⼊⼝配置）
//这⾥我已经写成对象格式了
//有多少个页⾯就添加多少个key:value
//这⾥我已经添加了⼀个admin
//数组中的paths.appSrc+'/admin.js'就是这个html页⾯的⼊⼝⽂件
entry: {
index:[
paths.appIndexJs,
],
admin:[
paths.appSrc + '/admin.js',
]
}
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 =>
},
2） 修改config下fig.prod.js⽂件
A 修改entry
//这⾥的paths.appIndexJs和paths.appSrc+'/admin.js'是⼊⼝⽂件
entry:{
index:[
paths.appIndexJs
],
admin:[
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,
react native 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）在开发环境中如果想通过地址访问不同页⾯，需要修改fig.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项⽬运⾏时端⼝端⼝不同，存在跨域问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。