Comment configurer l'environnement de développement de React ? Étapes de configuration de l'environnement de développement React+webpack (article détaillé)

Cet article parle principalement de la compréhension approfondie des étapes de configuration de l'environnement de développement de react+webpack. Lisons maintenant cet article ensemble

Ici, nous allons d'abord expliquer les raisons et les pratiques de chacun. étape , d'autres articles expliqueront comment créer rapidement un webpack, ce qui n'a pas besoin d'être si fastidieux. Configurer le lien de l'article de base : http://www.php.cn/js-tutorial-409770.html

Transférer vers le répertoire ci-dessus :

Répertoire
2. Chapitre de mise à niveau du Webpack
6. Module ES6 vers ES5
7. Module d'url et de fichier
3. Chapitre avancé du Webpack
1. Vérificateur de syntaxe eslint
2.uglifier le cryptage et la compression du code source
3.moduleconcatenationPlugin
4.devtool
5.happypack
6.dll

Module 6.ES6 vers ES5

Parce que certains navigateurs ne prennent pas en charge ES6 la syntaxe n'est pas entièrement compatible, mais nodejs prend déjà en charge ES6, donc webpack fournit un module ES6 vers ES5.
Instructions d'installation (utilisées en mode développement) :

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

Si vous souhaitez prendre en charge React, vous devez installer les modules suivants :

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

Webpack.config.js code :

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

Créez le fichier .babelrc dans le chemin racine

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

7.url et les modules de fichiers
Introduisez le module url pour traiter les images, et le module de fichiers pour traiter d'autres types de fichiers en plus des images
Instruction :

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

webpack.config.js Code :

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]' 
    }...}

3. Webpack Advanced Chapter
1.
ESLint est un outil d'assurance qualité permettant d'éviter les erreurs de bas niveau et d'unifier le style de code.
Instructions d'installation :

npm install eslint eslint-loader --save-dev

Après avoir installé eslint, créez un fichier de règles via la commande 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

Après avoir répondu à la question, un fichier au format .eslintrc.json sera généré sous le répertoire racine, et le package correspondant sera automatiquement installé. Le contenu de .eslintrc.json
peut être affiné en fonction de vos propres habitudes de programmation. Site Web chinois ESLINT
Voici un exemple :

{    "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"
    }
}

Configuration de webpack.config.js

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

2.uglify le cryptage et la compression du code source (vous voulez en voir plus Juste allez sur le site Web PHP chinois React Reference Manual colonne pour apprendre)

est un plug-in pour webpack, utilisez-le simplement directement.

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

4.devtool
L'outil auxiliaire fourni par webpack peut afficher correctement le nombre de lignes d'erreur dans le code source lors du débogage. eval-soure-map est utilisé en mode développement. D'autres paramètres utilisent l'environnement

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

5.happypack
Laisser le chargeur traiter les fichiers dans plusieurs processus pour accélérer la construction du 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
à la racine Créez un fichier webpack.dll.config.js dans le répertoire

//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"));

Tapez la commande suivante dans la fenêtre Powershell :

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

Deux fichiers seront générés dans le chemin de construction, un manifeste .json, un autre fichier appelé supplier.XXXX.js. supplier.xxx.js doit être introduit en HTML (écrit directement dans le modèle HTML ici).
webpack.config.js remplissez :

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

puis tapez npm start dans Powershell.

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual pour en savoir plus. Si vous avez des questions, vous pouvez laisser un message ci-dessous). .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!