webpack frames

バッジ

• 形式をチェック&&
• webpack1-ie8
• webpack3-react
• webpack3-vue
• webpack4-react
• webpack4-vue

アップデート手順

1. webpack4-vueとwebpack3-vueに含まれるフォルダーはまったく同じです。必要に応じて自分でコピーしてください。
2. webpack4-reactとwebpack3-reactに含まれるフォルダーはまったく同じです。必要に応じて自分でコピーしてください。
3. webpack 2 と 3 の違いは非常に小さいので、基本的に 2 を 3 に直接置き換えても問題ありません。ここでは、公式の移行ドキュメントであるバージョン 1/3/4 についてのみ説明します。
4. 開発環境はホットリロードされています。開発環境をie11以下に対応させたい場合は、ホットリロードを解除してください。
   • pluginsファイル.babelrcからreact-hot-loader/babelを削除します。
   • package.jsonのdevDependenciesからreact-hot-loader削除
   • config/opt.dev.jsのdevServer.inline false である必要があります (vue はこの点のみを変更する必要があります)
   • コードからreact-hot-loader削除する
5. 開発環境はすでにフロントエンドmock apiをサポートしており、 src/mockの下にあるファイルを自動的に読み取り、ホット アップデートを実行します。コード ロジックはconfig/mock.jsにあり、 example含まれています。
6. vueとvue-template-compilerのバージョンは完全に一致している必要があります。一致していないと、予期しないエラーが発生します。
7. configディレクトリ内のwebapck134,react,vueの設定は、異なるプロジェクトでopt.self.js変更するだけで統合されています。
8. readme記述に抜けがありますので、ファイルに移動してコードのコメントを読んでください。重要なのは、 configディレクトリ内のファイルにコメントと公式のリファレンス ドキュメントのアドレスがあることです。
9. devDependenciesロックされたバージョンの依存関係を配置するために使用されます。 dependencies npm に公開する必要がないため、この分類はより恣意的であり、Google に区別してください。詳細については、Baidu のドキュメントを参照してください。
10. DllPluginとCommonsChunkPlugin或splitChunks重複した機能を持っており、前者は事前にwebpackコマンドを実行する必要があるため、後者は操作可能なスペースが大きく、ファイルサイズをより均一にするために自由に解凍できるため、単純にexternalsに置き換えることができます。 、以下はDllPluginが使用されなくなりました

環境整備

1. タオバオのミラーを設定するnpm config set registry https://registry.npm.taobao.org
2. 管理者としてnpm i -g npminstall実行します
3. コマンドラインで現在のディレクトリを入力し、 npminstall -cを実行します。
4. エラーが発生した場合の一般的な解決策は次のとおりです。
   • 管理者としてnpm cache clean -fおよびnpm cache verify -f実行します
   • node_modulesディレクトリを削除します
   • npminstall -c再実行します
   • 最後に、より良いネットワークに変更し、 nodeとnpmアップグレードします。
5. 使用上の注意:
   • npminstall -cとnpm install互換性がありません。前者は後者よりもはるかに高速ですが、一緒に使用することはできません。
   • 使用に切り替えるには、 node_modulesフォルダーを削除する必要があります
   • node-v12.0.0に問題がある場合は、まだアップグレードしないでください。node node-v12の最新バージョンには問題がありません。
   • 場合によっては、説明できないパッケージング エラーやコーディング エラーが発生することがあります。node_modules node_modules削除して再試行してください。

開発環境の立ち上げ

1. npm start
   • ieのサポートが必要な場合にご利用ください。
   • npm run env -- FOR_IE=1 npm start
2. ブラウザで http://localhost:8888 を開きます

実稼働環境の展開

1. npm run app
   • ieのサポートが必要な場合にご利用ください。
   • npm run env -- FOR_IE=1 npm run app
2. dist フォルダーの内容をサーバーにコピーするだけです

他の機能を追加する

1. npm run report実稼働パッケージ バンドルの構成を表示する
   • ieのサポートが必要な場合にご利用ください。
   • npm run env -- FOR_IE=1 npm run report
2. npm run debugブレークポイント デバッグ起動、ポート 7777 を追加します
   • ieのサポートが必要な場合にご利用ください。
   • npm run env -- FOR_IE=1 npm run debug

package.jsonを更新する

• npm i -g npm-check-updatesをインストールします
• package.jsonディレクトリでncu (view) ncu -u (update) を実行します。

反応ホットローダーのホットリロードを使用する

公式ドキュメント

1. package.jsonのdevDependenciesにreact-hot-loader追加します。
2. webpack.cfg.dev.jsのdevServer.inline trueである必要があります
3. .babelrcのpluginsにreact-hot-loader/babelを追加
4. 起動コマンドに--hotを追加します。HotModuleReplacementPlugin HotModuleReplacementPlugin同時に使用しないでください。
5. exportルート コンポーネントが変更され、反応する前にreact-hot-loaderが導入されますreact

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

注: ie8+react@0をサポートしているのは 4.3.12 のみであり、スクリプト内で完了している小さな変更が必要です。

画像処理

• 通常の画像 => https://tinypng.com图片压缩=> url-loader (4kb以下)
• SVG画像 => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 は ie8 研究をサポートします

1. DllPlugin によってパッケージ化されたコードは変換されておらず、非互換性の問題が発生する可能性が高いため、パッケージ化の速度を大幅に向上させることはできません。
2. ホットリロードの原理は Object.defineProperty であり、ie8 ではサポートされていません。
3. 最新の React/antd を使用できません。[email protected]/[email protected] は ie8 のみをサポートします。vue は ie8 を直接サポートしません。
4. 現時点では、Webpack 3 4 の利点はほとんどサポートされておらず、オンライン版の互換性はあまり良くありません。
5. 本当に webpack 3 4 を使用して ie8 と互換性を持たせたい場合は、以下が参考のために提供されていますが、テストされていません (すべて問題があるはずです)。
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

コード仕様リファレンス

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• 一般的に使用されるesling構成eslint-config-egg eslint-config-react-app eslint-config-ali

個人的なコーディングの習慣 (人によって異なります。参考として、正しいと思うものを選択してください)

ファイル末尾の空行について

• 個人は自分の習慣に従い、チーム開発は自動eslint --fix

コードのインデントについて

• 個人は自分の習慣に従い、チーム開発は自動eslint --fix
• タブとスペースについては終わりのない議論があります。html の attr 改行配置や CSS のコロン配置を追求しない場合でも、配置を追求したい場合はタブに問題はありません。スペースを使用する方が良いでしょう。

引用符について

• js は二重引用符を統合します。文字列内の二重引用符は" 、単一引用符x27 、二重引用符x22として統合されます。
• CSS では二重引用符が統一されており、文字化けを防ぐためにコンテンツの内容をエスケープする必要があります。
• css/less/scss では、多くの場合、一重引用符の代わりに二重引用符が使用されます。また、場合によっては一重引用符がコンパイル時に問題を引き起こす可能性があります。また、html タグでも二重引用符が使用されますが、これはたまたま統一されています。

カンマを付けるかどうか

• 構文エラーがない場合は追加すると、diff の変更が少なくなります。

セミコロンを追加するかどうか

• 構文エラーがない場合は追加すると、diff の変更が少なくなります。

変数の定義について

• 1 行に 1 つの変数を個別に定義した場合は、const が優先され、var の代わりに let が使用されます。
• 可能であれば、代入にはオブジェクトまたは配列の分割を使用します。

輸入注文について

• 最優先事項はポリフィルの導入であり、次に React/Vue が続きます。
• 次に、モジュール ディレクトリ (node_modules) で、モジュール パスの深さが最初にソートされ、順序は (コンポーネント > 関数 > 定数) に従って分類およびソートされます。
• 次に、promise-loader などのローダー媒体を通じてロードされます。
• 次に、開発ディレクトリ (dev_dir) があり、(コンポーネント > 関数 > 定数) に従って分類および並べ替えられます。
• スタイル ファイルを導入し、(node_modules>dev_dir) に従って分類および並べ替えます。
• イメージ ファイルをインポートし、(node_modules>dev_dir) に従って分類および並べ替えます。