1つの準備開発環境（Windowsの場合）
1.1インストールnodejsとNPM
-
1）インストールパッケージnodejsをダウンロード：http://nodejs.org/en/download/
ときnodejsもインストールされますNPMをインストール
- 2）インストールの確認後にインストールが正常に完了したことを
コマンドラインは、NPMとノードのバージョンを確認するには、次のコマンドを入力します。
npm -v
node -v
インストールが正常かどうかを自動的に設定された環境変数の成功チェックをインストールに失敗します
1.2インストールの作成反応するアプリ（公式には足場を反応させます）
コマンドライン：npm install -g create-react-app
作成反応するアプリ：素早くプロジェクトの作成反応させるために使用することができます
-gを：グローバル作成反応するアプリは、ツールを足場インストールし、この手順は一度実行する必要があります
エクスプレス・発電機の設置1.3（公式の足場を発現します）
コマンドライン： npm install express-generator -g
表現発電機を：アプリケーションがすぐに急行作成するために使用することができ
-g：グローバルエクスプレス発電足場インストールツールを、あなたは一度だけこの手順を実行する必要があります
図2は、+特急プロジェクトを反応させるの作成します
フロントエンドフレーム：REACT
サーバ：フレームに基づいて明示ノード
両方の組み合わせは、すぐにWebプロジェクトを作成します。サービスの必要性が操作を容易にするために、サーバー側のコードに展開されるので、プロジェクトを作成するために反応し、その後、プロジェクトの下、公開文書を表現するためにパッケージディレクトリに反応し、反応するプロジェクトディレクトリに急行プロジェクトを作成します。
（1）プロジェクト（クライアント）と反応作成
作成反応するアプリのmyappに
（2）は、特急プロジェクト（サーバー）を作成します
CDのMyApp
表現 -generator --view = EJSサーバーを
テンプレートエンジンを追加します - ビュー= EJSを、ここで選択したテンプレートエンジンとしてEJS。また、パブ、ヒスイや他のテンプレートエンジンを選択することができます
2.2は、最初のプロジェクトのディレクトリ構造を反応させます
作成反応するアプリのアイテムを使用して作成し、WebPACKのを入れている、バベルパッケージおよびその他の構成は反応するスクリプトをするためのプロジェクトに依存しているので、外側の層は、カタログのWebPACKとその他の設定ファイルで見ることができません。
-
1）自動的に生成されたプロジェクトディレクトリの説明
- A.のnode_modules：プロジェクトの依存関係のディレクトリには、関連する依存関係を自動的にgitに提出しなくても、ディレクトリにダウンロードされ、インストールxxxのNPMインストールするには、コマンドを使用します。
-
B.公開：パブリックディレクトリは、そのディレクトリ内のファイルは、WebPACKの解析され、パッケージ、ロードされません。そのディレクトリ内のすべてのファイルを直接NPM実行ビルドによってパッケージ化されたビルドディレクトリにコピーされます。
- a）はfavicon.icoを：ウェブサイトのアイコン（交換可能、削除）
- B）のindex.html：ページテンプレート、WebPACKの出力ファイルパッケージは、テンプレート内に導入された後、パブリックディレクトリ・パスの環境変数ポイントによってindex.htmlを％PUBLIC_URL％。
- C）manifest.jsonを：PWAは、デスクトップの追加機能を達成するために適用されますがmanifest.jsonを依存します。manifest.jsonをファイル缶により、
-
C.のSRC：ソースディレクトリ、App.test.js registerServiceWorker.jsファイルが一定の意義があるindex.jsに加えて、ディレクトリには、残りのファイルの使用が直接削除されている示しています。
- A）index.js：プロジェクトファイルが入り口で、入り口はWebPACKのファイルをパケット化されます。
- B）App.js：プロジェクトが作成されたら、ページの内容を変更することによって、このファイルを変更することができます
- C）App.test.js：テストユニットのプレゼンテーションは、まだなぜ使用することを知りません。直接削除することができます。
- D）registerServiceWorker.js：サービスワーカーは、バックグラウンドで実行中のスレッドでオフラインキャッシング、メッセージのプッシュなどを自動的に更新などのバックグラウンドタスクに対処するために使用することができます。registerServiceWorkerは、キャッシュリソースの使用プロジェクトを反応させる登録されたサービス労働者、です、このようにあなたが訪問次回は、あなたはすぐにリソースにアクセスすることができます。リソースがキャッシュされるためと、そうであっても場合にもオフラインアプリケーション（この場合に使用されるリソースは、キャッシュされたリソースの前にある）にアクセスすることができます。注、registerServiceWorkerは、サービス従事者のみが本番環境で有効になり、登録、およびhttps効果的にするためにのみ機能。
- D.は.gitignore：このファイルはgitのヘルプの表示を無視する書類を提出する必要を指定しないgithubのフィルタ構成ファイル、gitのヘルプが無視されます
- E. README.md：このファイルは記述ファイルであります
- F.のpackage.json：プロジェクトに必要な様々なモジュール、および（例えば、名前、バージョン、ライセンス及び他のメタデータなど）の構成情報項目を定義します。部分的に依存モジュールが隠されています。
- G.のpackage.lock.json：依存関係やバージョン情報はpackage.lock.json関連書類を書かされた更新パッケージのバージョンが追加されますNPM NPMがその都度、
- 2）package.jsonの設定
- 3）使用可能なスクリプトは、説明を命じます
まず、次のコマンドは、実際に対応する下部node_modules /反応-srcipt /スクリプトスクリプトファイルを実行することによって行わNPM実行します。
- A.npm運転開始：プロジェクトの先頭を通じて、HTTP：// localhostを：3000は、プロジェクトにアクセスすることができます。
- B.のNPMの実行ビルド：プロジェクトパッケージ、本番環境では、ビルドディレクトリにコードをコンパイルし、すべてのコードが適切に包装し、ハッシュリネームファイルを使用している間圧縮を最適化します。このコマンドを実行する前に、パッケージを必要とします。新しい設定「ホームページ」でJSONの記事：（上記のプロファイルが指定されている）、プロジェクト中に、サーバーでのアクセスに構築ニーズの後に、それ以外の場合は空白のページが開きます;.「」
- C. NPMの実行テスト：インタラクティブモニタモードでプログラムを実行してテストを開始します。
- D. NPM実行イジェクト：隠されたコンフィギュレーションのエクスポート;されて作成反応するアプリの足場は、本質的にプロジェクトを構成するために反応し、スクリプトを使用している知っている必要があり、すべてのプロファイル情報が隠されている（node_modulesは/反応-スクリプト）;とき手動で拡張された構成を変更する場合のWebPACKの必要性が隠された構成を露出させる必要がある場合があり、特に注目すべきは、操作が一方向操作が使用取り出したら、それを回収することができない、ということである（再構成は非表示）。
2.3は、プロジェクト構成を反応させます
デフォルトで生成作成反応するアプリは、シングルエントリー単一の輸出生産環境、反応するスクリプトによって一元管理され、複雑なマルチエントランスプロジェクトのニーズを満たすことができない、実際のプロジェクトのニーズを満たすために、プロジェクトを構成する必要があります。変更するプロジェクトの私達の設定を容易にするため、NPM実行イジェクトによって内蔵されたコンフィギュレーションのすべてに露出させることができます。
2.3.1 NPM実行イジェクト
ルートディレクトリにmyappのは、次のコマンドを実行しますnpm run eject。すべての組み込みの設定公開、プロジェクトの下で、設定ファイルのパーツを追加または変更します。
新しい設定（設定ファイル）とスクリプト（スクリプトファイル）のルートディレクトリ内のディレクトリ。
注：これは不可逆的な、一度ロールバック実行することはできません。
構成の変形例の他の方法：また企図カバレッジを達成するためにウィジェット構成-APP-再配線を反応させます。
2.3.2マルチエントリの設定
これは、プロジェクトのデフォルトエントリファイルのみindex.js（srcディレクトリ）です。
例えば、srcディレクトリにエントリファイルを追加するAdmin.js。
に設定して設定ファイルを変更する必要があります。
- 1）変更webpcak.config.dev.jsファイル
- A.変更エントリ（新しいコンフィギュレーション・ファイルのエントリをJS）
// ここで私は、オブジェクトの形式で書かれている // キーの番号を追加どのように多くのページ：値 // 私はADMIN追加しました。ここ // 配列paths.appSrc +「/ admin.js」は、このHTMLページですエントリファイルの エントリ：{ インデックス：[ require.resolve（」./polyfills' ）、 require.resolve（ '/ webpackHotDevClient-DEV-utilsの反応' ）、 paths.appIndexJs、 ]、 管理者：[ require.resolve（」./polyfills' ）、 require.resolve（ '/ webpackHotDevClient-DEV-utilsの反応' ）、 paths.appSrc + '/admin.js' 、 ] }
- B.修正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，如下页面，可查看打包后文件分布，以及打包文件大小。
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リクエストメソッドパッケージ | ---- |ビュー// パッケージ後のファイルを公開ディレクトリの下に置かれたため、Expressは、フレームワークが来るので、これは、ファイルない場合があります | ---- | app.js // エントリファイル | ---- | package.json | ---- |パッケージ変更のため、lock.json
無思考、元のリンクから転送https://segmentfault.com/a/1190000017472925、著者_jingjing