React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (詳細記事)

この記事では主に react+webpack の開発環境設定手順について詳しく説明します。それでは、この記事を一緒に読みましょう

ここでは、最初に各手順の理由と方法について説明します。 Webpack をすばやく構築する方法はそれほど面倒ではありません。設定基本記事のリンク: http://www.php.cn/js-tutorial-409770.html

上記のディレクトリに移動します:

ディレクトリ
2. Webpack のアップグレード
6. ES6 から ES5 モジュール
7 。 URL およびファイル モジュール
3. 高度な Webpack
1. 構文チェッカー eslint
2. ソース コードの暗号化と圧縮
3.moduleconcatenationPlugin
4.devtool
5.happypack
6.dll

6.ES6 から ES5 へのモジュール

一部のブラウザーは ES6 の一部の構文と完全には互換性がありませんが、nodejs はすでに ES6 をサポートしているため、webpack は ES6 から ES5 へのモジュールを提供します。
インストール手順 (開発モードで使用):

npm install babel-loader babel-core babel-preset-env webpack --save-dev

React をサポートしたい場合は、次のモジュールをインストールする必要があります:

npm install babel-preset-es2015 babel-preset-react babel-preset-stage-3 --save-dev

Webpack.config.js コード:

module.exports = {...module:{    
    rules:[...
   {
        test:/\.jsx$/,
        exclude:/(node_modules|bower_components)/,//排除XXX类型文件
        use:{
            loader:'babel-loader'           
        }
    }
]
}...}

ルート パスに .babelrc ファイルを作成します

{
  "presets": ["es2015","react"]}

7 .url モジュールとファイル モジュール
画像を処理するための URL モジュールと、画像以外の他のファイル タイプを処理するためのファイル モジュールを導入します
命令:

npm install url-loader file-loader --save-dev

webpack.config.js コード:

module.exports = {...
    {   //配置辅助loader,处理图片  
        test:/\.(png|jpg|gif)$/,
        loader:'url-loader',
        options:{limit:8192,name:"images/[name].[ext]"}
    },
    { //处理图片外的其他文件类型
        test:/\.(appcache|svg|eot|ttf|woff|woff2|mp3|pdf)(\?|$)/,
        include:path.resolve(__dirname,'src'),
        loader:'file-loader?name=[name].[ext]' 
    }...}

Webpack Advanced
3. 1. 構文チェッカー eslint
ESLint は、低レベルのエラーを回避し、コード スタイルを統一するために使用される QA ツールです。
インストール手順:

npm install eslint eslint-loader --save-dev

eslint をインストールした後、init コマンドを使用してルール ファイルを作成します。

指令：
cd 进入项目文件夹根路径，敲./node_modules/.bin/eslint --init  

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON

質問に回答すると、ルートディレクトリ下に.eslintrc.json形式のファイルが生成され、対応するパッケージが自動的にインストールされます。 .eslintrc.json
内部のコンテンツは、自分のプログラミング習慣に応じて微調整できます。 ESLINT 中国語 Web サイト
例は次のとおりです:

{    "env": {        "browser": true,        "commonjs": true,        "es6": true,        "node": true
    },    "extends": "plugin:react/recommended",    "parserOptions": {        "ecmaVersion": 8,//ECMAScript syntax 最新版本
        "ecmaFeatures": {            "impliedStrict": true,            "experimentalObjectRestSpread": true,            "jsx": true
        },        "sourceType": "module"
    },    "plugins": [        "react"
    ],    "rules": {        "semi": [            "error",            "always"
        ],              
        "no-debugger": "error",//不允许用debugger这个关键字
        "no-dupe-args": "error",//不允许函数参数同名
        "no-caller": "error",//不允许用callee等，es6严格模式不支持
        "no-unmodified-loop-condition": "error",        "no-with": "error",//不允许用with来声明
        "no-catch-shadow": "error"
    }
}

webpack.config.js 構成

module: {
        rules: [        ...{
        test:/\.js$/,
        enforce:'pre',
       loader:'eslint-loader',
       include:path.resolve(__dirname,'src')
    }...]
}

2.uglify ソース コードの暗号化と圧縮 (詳細を確認したい場合は、PHP 中国語 Web サイトReact Reference Manual にアクセスして学習してください) )

これは webpack のプラグインです。直接使用してください。

webpack.config.js 代码：
module.exports = {   ...
 plugins:[
 ..  
new webpack.optimize.UglifyJsPlugin(
{output: { 
    comments:false,//删除代码中所有注释
},
compress:{
 warnings:false,
}
})
]...}

4.devtool
webpackが提供する補助ツールは、デバッグ中にソースコード内のエラー行数を正しく表示できます。 eval-soure-map は開発モードで使用されます。他のパラメーターは環境

module.exports = {...devtool:'eval-soure-map'...}

5.happypack を使用します
ローダーに複数のプロセスでファイルを処理させて、Webpack の構築を高速化します

安装指令：npm install happypack --save-dev

var os = require('os');//os.cpus().Length 一般会取不到值，这里直接size:4,而不是size:os.cpus().lengthvar Happypack = require('happypack');var happypackThreadPool = Happypack.ThreadPool({size:4});//size:os.cpus().Lengt根据电脑的idle，配置当前最大的线程数量module.config.js 下面的配置module.exports = {
...module:{    rules:[
 {        test:/\.js$/,    
        include:path.resolve(__dirname),        loader:'happypack/loader?id=happybabel'

    }
]
}plugins:[new Happypack({    id:"happybabel",    loaders:['babel-loader'],    threadPool:happypackThreadPool,    cache:true,    verbose:true}),
]
}

6.dll
ルート ディレクトリに webpack.dll.config.js ファイルを作成します

//webpack.dll.config.js 的内容：const webpack = require('webpack');const path = require("path");const fs=require('fs');const vendors = [  'react' //这里添加第三方库文件

];module.exports = {  entry: {    vendor: vendors,
  },  output: {    path: path.join(__dirname+'/build'),    filename: '[name].[chunkhash].js',    library: '[name]_[chunkhash]',
  },  plugins: [    new webpack.DllPlugin({      path: path.join(__dirname+"/build"+'/manifest.json'),      name: '[name]_[chunkhash]',      context: __dirname,
    }),
  ],
};//console.log(path.join(__dirname+"/build"));

In Powershell ウィンドウ 次のコマンドを入力します。

webpack --config webpack.dll.config.js -p

ビルド パスに 2 つのファイルが生成されます。1 つは、manifest.json で、もう 1 つは、vendor.XXXX.js と呼ばれます。 vendor.xxx.js は HTML で導入する必要があります (ここでは HTML テンプレートに直接記述します)。
Webpack.config.js 次のように入力します:

 moule.exports = { ...
 plugins:[  ...
 new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./build/manifest.json'),
    }),    ...]
....
}

次に、Powershell で「npm start」と入力します。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact ユーザー マニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がReact開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (詳細記事)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。