标签:nbsp test 编译 而且 需要 sel plugins 安装完成 文件名
1) 下载nodejs安装包:http://nodejs.org/en/download/
nodejs安装时会同时安装npm
命令行输入以下命令,查看npm和node版本:npm -v
node -v
若未安装成功可检查环境变量是否安装时自动设置成功
命令行输入:npm install -g create-react-app
create-react-app:可以用来快速创建react项目
-g:全局安装create-react-app脚手架工具,这个步骤只需要执行一次
命令行输入: npm install express-generator -g
express-generator:可以用来快速创建express应用
-g:全局安装express-generator脚手架工具,这个步骤只需要执行一次
前端框架:react
服务端:基于node的express框架
两者结合快速创建web项目。由于服务端代码需要部署到服务器,为了方便操作,先创建react项目,然后在react项目目录下创建express项目,将react的打包目录设置为express项目下的public文件。
create-react-app myapp
cd myapp
express-generator --view=ejs server
添加模版引擎:--view=ejs,此处选择ejs作为模版引擎。还可以选择pub、jade等其它模版引擎
使用create-react-app创建的项目,已经把webpack、babel等配置都封装到依赖项目react-script中,因此在目录外层无法看到webpack等配置文件。
1)自动生成的项目目录介绍
B. public:公共目录,该目录下的文件都不会被webpack进行加载、解析和打包;通过npm run build进行打包时该目录下的所有文件将会直接被复制到build目录下;
C. src: 是源码目录,该目录下除了index.js App.test.js registerServiceWorker.js 文件具有一定意义其余文件都是演示使用可直接删除。
首先说明:通过npm run 执行下面命令实际上是运行 node_modules/react-srcipt/script下对应的脚本文件;
create-react-app默认生成的是单入口单出口生产环境,统一通过react-script进行管理,无法满足复杂的多入口项目的需要,因此需要对项目进行配置,使其满足实际项目需要。可通过npm run eject来暴露所有内建配置,以方便我们对项目的配置进行修改。
进入myapp根目录,执行以下命令:npm run eject
。暴露所有内建配置,项目下会新增或对部分配置文件进行修改。
根目录下新增config(配置文件)和script(脚本文件)目录。
注意:此操作不可逆,一旦执行无法回退;
修改配置的其它方法:也可考虑采用react-app-rewired插件来实现配置覆盖。
项目默认只有index.js(src目录下)这一个入口文件。
以在src目录下新增入口文件admin.js为例。
需修改config中的配置文件来:
//这里我已经写成对象格式了 //有多少个页面就添加多少个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‘, ] }
//多少个页面就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‘ }),
//由于原配置入口文件只有一个,因此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, ‘/‘), },
//这里的paths.appIndexJs和paths.appSrc+‘/admin.js‘是入口文件 entry:{ index:[ require.resolve(‘./polyfills‘), paths.appIndexJs ], admin:[ require.resolve(‘./polyfills‘), paths.appSrc+‘/admin.js‘ ] }
//和开发环境下一样,多少个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, }, }),
//这里的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‘ }, ] },
生产环境:本文中的项目,由于打包后的代码会放在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 } }
当页面嵌套过深时,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‘
缺点:此方法能简化引用方法,但无法通过快捷键进入该引用文件。
//修改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”
npm run build
或npm run analyz
,浏览器会自动打开127.0.0.1:8888,如下页面,可查看打包后文件分布,以及打包文件大小。
安装方法: npm install uglifyjs-webpack-plugin --save-dev
在webpack.config.prod.js文件中添加
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘) module.exports = { plugins: [ new UglifyJSPlugin(), ] }
//修改webpack.config.prod.js文件: //注释devtool:shouldUseSourceMap? ‘source-map‘:false devtool:false,//增加 3)添加cache-loader,减少打包时间 //修改webpack.config.dev.js文件: module:{ rules:[{ use:[ //添加在最前面 ‘cache-loader‘, ] }] }
在其它加载程序加载之前添加以将结果缓存在磁盘上
修改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, },}),
命令行输入:npm run build
,出现以下文件夹,其中admin.html和index.html分别是不同的入口。
可在path.js文件中修改打包后资源文件路径,例如修改path.js文件中getServedPath方法中的‘/’,改为‘/build’,则打包后资源文件的路径会加上build,修改前资源文件路径中是没有build的。
本文中react+express的项目,无需修改资源文件根路径,因为express会配置资源文件所在目录为。
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"
为了方便,将react打包目录修改为server目录下public目录,可以避免每次打包后都需要将build目录下的文件在复制到server目录下。
//修改path.js文件,module.exports中的appBuild变量 //将appBuild: resolveApp(‘build‘),改为 appBuild: resolveApp(‘server/public‘),
在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" },
浏览器扩展工具中搜索此插件并安装,可以查看到react组件结构
chrome引入了source-map文件,可以查看打包前代码。唯一要做的就是配置webpack自动生成source-map文件,这也很简单,在webpack.config.js中增加一行配置即可(需要重新启动webpack-dev-server使配置生效),create-react-app已做此配置,因此不需要再修改。
Create-react-app已安装Eslint,可对eslint进行自定义配置规则。
开发目录主要是src目录,因此需要修改的目录主要是src目录。
|——src |————|common //公共组件目录,如http.js、cookie.js等 |————|components //基础组件、业务组件、业务代码抽象出的一些基础类,例如每个页面可以在此目录下建立一个文件存放相关组件。 |————|layouts //布局相关组件及其样式文件,如header.js、footer.js、menu.js等 |————|styles //公共样式文件 |————|static //公共的静态资源文件,如公共的图片资源文件等 |————|views //页面入口文件,可与comonents中的页面组件对应
如果使用了router和redux可在src下增加目录:
|——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
标签:nbsp test 编译 而且 需要 sel plugins 安装完成 文件名
原文地址:https://www.cnblogs.com/GenuisZ/p/12154640.html