オリジナル：https://segmentfault.com/a/1190000016342792
EDITORIAL
プロジェクトがビルドされますたびは、時間の経過とともにどのように設定を忘れてしまう、多くのものを設定するように反応します。彼らの記憶を容易にするためにも、他の開発者にすぐにこのレコードをふり、建物の用途を反応させる開発します。
このプロジェクトは、に基づいてcreate-react-app足場構成。方法を開発するプロジェクトの数の主な構成は一般的なのWebPACKとして、使用sass、redux、热加载、代理その上およびその他のツールのライブラリの導入と。
プロジェクトを初期化します
まず第一に、あなたは最初に作成反応するアプリを使用する必要がありますを参照して、プロジェクトを作成するために反応し ます。https：//github.com/facebookin ...
インストール create-react-app
npm install -g create-react-appアプリケーションを作成します。
create-react-app my-app
cd my-app注：私のアプリは、プロジェクトの名前を指し、ユーザーはプロジェクト名をカスタマイズすることができます
この時間は、コマンドラインに入力することができます
npm start ：プロジェクトは、プロジェクトのスタートページを見ることができます起動します。
npm run build ：プロジェクトのリリース。
このようなプロジェクトは、簡単な初期設定が完了した反応するであろう。
しかし、すべての設定が隠されているデフォルトでは、カスタム設定には、次のコマンドを実行する必要があります。npm run eject
すべての構成項目あなたが出ているように、この時間は、継続するかどうか、不可逆的、yと入力し、コマンドプロンプトが表示されます。生成されconfigたフォルダを、あなたはまた、いくつかのカスタマイズ行うことができ、この時間が設定されています。
プロジェクトの構成
IEとの互換性
導入element-react UIフレームワークは、文句を言うだろう ReferenceError: “Symbol”未定义
- ソリューション：
プロジェクト導入babel-polyfill、あなたはapp.jsにインポートすることができます
コンフィギュレーションのWebPACK
コンフィギュレーションの一部に基づいて、WebPACKの
設定SASS
プロジェクトは個別に設定する必要がある場合は足場のデフォルトはSASS、SASSを設定されていません
図1に示すように、信頼搭載 npm install --save-d node-sass sass-loader
2、以下の変更の設定をwebpack.config.dev.jsとwebpack.config.prod.js、変更する必要が、開発環境とパブリッシング環境は、別個の構成です。
cssloaderを変更
することtest: /\.css$/, ：のように変更し test: /\.(css|scss|sass)$/,、すなわち特定SCSS / SASSファイル
最後に、追加しますsass-loader
エイリアスの設定
エイリアスは、プロジェクトファイルに私たちの迅速な導入を促進します。たとえば、私たちは、次のファイル構造として、ファイルのsrc / utilに/ツールの公開ディレクトリにプロジェクトを持っています
├── src
│ ├── assets # 项目资源
│ │ └── ...
│ ├── containers # 页面容器
│ │ └── pages
│ │ └── pageA # 页面A
│ │ └───a.js # a.js │ │── utils # 其他工具类 │ │ └── tools │ ├── index.js # webpack打包入口文件 コンポーネントの階層の奥深くには、a.js導入する必要がありtools、我々が使用します、ファイルを../../../util/toolsファイルの相対的な位置を見つけることが、エイリアスWebPACKのコンフィギュレーションを使用した後に直接設置することができます/srcディレクトリ。
// 未使用别名
import tools from '../../../util/tools';
// 使用别名后 import tools from '@/util/tools'; // '@/' 指向 'src/'コンフィギュレーション
DEVとprod環境を設定する必要があります
解決/別名で設定
これは resolve カスタム関数です。
function resolve(dir) {
return path.join(__dirname, '..', dir) }それはまたのように記述することができます
'@': path.join(__dirname, '..', 'src')
設定の熱負荷
create-react-appこのプロジェクトは、熱負荷の構成を有しており、私たちは、プロジェクト内のドキュメントをインポートする必要があるindex.jsライン上の熱負荷を有効にし、最後に直接追加
// index.js
/* 热加载 */
if (module.hot) {
module.hot.accept(); }
プロキシサーバーを構成します
しばしば遭遇リクエストインターフェイスクロスドメインの問題、開発のフロントエンドで生成されたクロスドメイン、設定はほとんどのWebPACKのdev_serverであるが、この方法は、アプリケーションでは有効ではありません作成-反応するアプリの多くの方法は、このアプリケーションのために、そこにあるはずpackage.jsonでプロキシ
// package.json
"proxy": "http://api.enjoycut.com/"
// 或者
"proxy": { "/article": { "target": "http://api.enjoycut.com/", "changeOrigin": true, "secure": false } } // 下面的方式没有配置过設定ルーティング
使用の-router4を反応させると、以前のバージョンでは、別のルータを使用
設定再来
コンフィギュレーション @connectデコレータ
プロジェクト内のReduxのは仕方によって直接アクセスすることができ@connect
設定されていません
設定後
なお、ここでデコレータ、モジュールをインストールする必要がありますbabel-plugin-transform-decorators-legacy
そして、package.jsonの内側に配置plugins
設定ツールの他のアイテム
classnames
クラス名が面倒反応するスイッチングにおいて、このような若干より複雑な動的スイッチングのdiv複数のクラス名などの三眼単純な操作が、より複雑な、クラスより多くの問題を、使用される単純なスイッチングクラス名を提供するツールライブラリを推薦することができます。
<div className={classNames('clip_item', {
'clip_active': isActive,
'effect_hover': activeDrag === 'video_inner',
'dragging': is_dragging} )}> // 默认classNAme： 'clip_item' // isActive === true 则添加className 'clip_active' // is_dragging === true 则添加className 'dragging'moment
プロジェクトのツールライブラリに時間をフォーマット、任意の形式に時刻の形式は、あなたがしたいです！非常に便利。
moment().format('MMMM Do YYYY, h:mm:ss a'); // 九月 10日 2018, 7:04:30 晚上
moment().format('dddd'); // 星期一 moment().format("MMM Do YY"); // 9月 10日 18 moment().format('YYYY [escaped] YYYY'); // 2018 escaped 2018 moment().format(); // 2018-09-10T19:04:30+08:00moment.js文档地址：http://momentjs.cn/
项目后期优化
antd按需加载
一般情况下，我们按照antd官网使用方式在css中导入整个ui的样式，@import '~antd/dist/antd.css';，
比如我们在项目中只使用了Button，和Table，但是这样实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）；
因此我们需要使用按需加载，只加载我们使用过得组件样式。
注意：如果是运行了eject ，webpack配置了babelrc: false ,单独根目录新建.babelrc会报错的，需要在webpack.dev.js配置，在module模块 ,loader: require.resolve('babel-loader')对象中的plugins数组中添加
这里只展示允许eject暴露了webpack配置文件的配置方式，未暴露webpack配置方式请参考https://segmentfault.com/a/11...
- 安装babel-plugin-import
npm install --save-dev babel-plugin-import - 给 webpack 的 babel-loader plugins 加上 babel-plugin-import
需要修改两个文件 /config/webpack.config.prod.js 和 /config/webpack.config.dev.js (修改的内容一样,升级后的create-react-app合并为一个文件 webpack.config.js)找到加载 babel-loader 的地方，往他的 plugins 加入如下代码
[
require.resolve('babel-plugin-import'),// 导入 import 插件
{
libraryName: 'antd', //暴露antd style: 'css' } ] 最后形成的配置如下（create-react-app 版本不同最后的配置可能不一样，原理一样）：
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc, loader: require.resolve('babel-loader'), options: { customize: require.resolve( 'babel-preset-react-app/webpack-overrides' ), plugins: [ [ require.resolve('babel-plugin-named-asset-import'), { loaderMap: { svg: { ReactComponent: '@svgr/webpack?-svgo,+ref![path]', }, }, }, ], // antd按需加载 [ require.resolve('babel-plugin-import'),// 导入 import 插件 { libraryName: 'antd', //暴露antd style: 'css' } ], ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, cacheCompression: isEnvProduction, compact: isEnvProduction, }, },代码分隔（react-loadable）
一个动态导入加载组件的高阶组件.
未使用前
import Home from'./Home';使用后
import loadable from '@/utils/loadable'
const Home = loadable(() => import('./Home '));loadable组件
import React from 'react';
import Loadable from 'react-loadable'; //通用的过场组件 const loadingComponent =()=>{ return ( <div></div> ) }; //过场组件默认采用通用的，若传入了loading，则采用传入的过场组件 export default (loader,loading = loadingComponent)=>{ return Loadable({ loader, loading }); }プリレンダリング構成（事前レンダリングSPAプラグイン）
建設HTMLファイル生成される位相プレレンダリングされたマッチング・パス（注：各々はプリレンダリング経路は、対応するHTMLを有する必要）。HTMLファイルには、部品から構成されています。
あなたは、プロジェクトの両方を使用した場合代码分隔と、预加载ページのスプラッシュスクリーンにつながります。その理由は、プリロードパッケージ静的なページをレンダリングする、HTMLの外にロードされ、その後、分離コードのjsの後にページを要求されますされています。HTMLは再びマウントするルートノードにつながります。別々のコードを使用しながら、事前ロードを使用することは推奨されません。
コンフィギュレーション
1。npm install prerender-spa-plugin
2.探して /config/webpack.config.prod.jsファイルを
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin') module.exports = { plugins: [ ... new PrerenderSPAPlugin({ // Required - The path to the webpack-outputted app to prerender. staticDir: path.join(__dirname, '../build'), // Required - Routes to render. routes: ['/home', '/convert', '/trim', '/merge', '/watermark', '/remove', '/download'], }) ] } 3.追加するルートは同時にバックエンド構成ngnixを変更する必要があり、ルートに追加されます
/ -> home/index.html
/home -> home/index.html
/convert -> convert/index.html
/trim -> trim/index.html /merge -> merge/index.html /watermark -> watermark/index.html /remove -> remove/index.html /download -> download/index.html 除了上面的路径，其他路径全部指向 index.html ガイドプリレンダリングされた単一ページのアプリケーションマルチルート https://juejin.im/post/59d49d976fb9a00a571d651dの
指示 https://github.com/chrisvfritz/prerender-spa-plugin
ソース
迅速な建設プロジェクトを容易にするために、本実施形態によれば、すべてのコードgithubのプロジェクトに配置されています。
HTTPS：//github.com/zhaosheng8 ...