Connaissance de Webpack, Babel et React-js tutoriel-php.cn

Avant de commencer

Avant d'écrire l'article, je suppose que vous possédez déjà les compétences de base de JavaScript, Node 包管理工具, Linux 终端操作 Ensuite, je vous guiderai étape par étape pour construire. un à partir de zéroReact L'effet final du projet

Nous utiliserons Webpack et Babel pour créer une React application Notre objectif est très clair, qui est <.>更好的理解和掌握这些工具的使用

Les applications que nous créons doivent à la fois faire

et suivre 最小 pour solidifier les bases des étudiants qui ne sont pas particulièrement compétents 最佳实践

Initialiser

Créer votre projet , et ajoutez votre fichier de configuration

package.json

mkdir webpack-babel-react-revisited
cd webpack-babel-react-revisited

yarn init

Copier après la connexion

Webpack

Nous installons d'abord

, il est actuellement très populaire Webpack, il inclura tous les modules sont regroupés dans un une petite quantité de 模块打包器 pour que le code soit chargé du serveur dans le navigateur 块

yarn add webpack --dev

Copier après la connexion

Ensuite, nous commençons à écrire quelques modules. Nous enregistrons le fichier source

dans le répertoire app.js src

/** app.js */

console.log(&#39;Hello from 枫上雾棋!&#39;);

Copier après la connexion

Ensuite, nous exécutons

Webpack

./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js

Copier après la connexion

Si vous ouvrez le

généré, vous constatera que ce qui précède est le code de traitement du module de app.bundle.js, et ce qui suit est le webpackconsole.log

que nous avons écrit. Cette instruction consiste à utiliser notre

comme app.js de Webpack. et affichez le résultat dans 入口文件 Dans le dossier, les instructions sont un peu longues. Dans le développement réel, nous utilisons plutôt le fichier de configuration dist Afin de rendre la structure du document plus claire, reportez-vous à webpack comme suit. 目录

├── config
│   ├── paths.js
│   ├── webpack.config.prod.js
├── src
│   ├── app.js
├── package.json

Copier après la connexion

Ce qui suit est la référence

配置

paths.js

const path = require(&#39;path&#39;);
const fs = require(&#39;fs&#39;);

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {
  appDist: resolveApp(&#39;dist&#39;),
  appSrc: resolveApp(&#39;src&#39;),
};

Copier après la connexion

Ce fichier n'est pas nécessaire, mais à mesure que le projet grandit, sa signification apparaît instantanément sort

webpack.config.prod.js

const path = require(&#39;path&#39;);
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

const paths = require(&#39;./paths&#39;);

const plugins = [
  new HtmlWebpackPlugin({
    title: &#39;webpack babel react revisited&#39;,
    filename: path.join(paths.appDist, &#39;index.html&#39;),
  }),
];

const config = {
  entry: {
    app: path.join(paths.appSrc, &#39;app&#39;),
  },
  output: {
    path: paths.appDist,
    filename: &#39;assets/js/[name].js&#39;,
  },
  resolve: {
    extensions: [&#39;.js&#39;, &#39;.jsx&#39;],
  },
  plugins,
};

module.exports = config;

Copier après la connexion

Ici, nous avons également ajouté un plugin html-webpack, qui simplifie la création de notre fichier

Nous n'entrerons pas ici dans les détails. l'installation. Si vous ne le savez pas encore, vous pouvez cliquer sur le lien Découvrez HTML

, nous utilisons également un

, nous n'avons donc pas besoin de spécifier l'extension lors de l'importation <🎜. >, 语法糖 .js.jsx Ensuite, nous spécifions le fichier de configuration Exécutez

Webpack

à nouveau et constatons qu'en plus d'obtenir l'effet ci-dessus, il génère également automatiquement un

./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js

Copier après la connexion

pour nous. Nous pouvons cliquer dessus

pour voir l'effet dans la console. Par rapport à ce qui précède, n'est-il pas beaucoup plus pratique index.htmlhtml Bien sûr, en fin de compte, nous n'utilisons certainement pas cela ? méthode pour

. Ouvrez

, ajoutez ce qui suit build, puis exécutez package.json N'est-ce pas un sentiment instantané 脚本命令 Beaucoup de yarn buildnice

Webpack dev. serveur

"scripts": {
  "clean": "rimraf dist *.log .DS_Store",
  "build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress"
}

Copier après la connexion

De plus,

nous fournit un

qui prend également en charge Webpackdev server 模块热替换Tout d'abord, installez

webpack-dev-server

Ajouter des fichiers de configuration dans le répertoire

yarn add --dev webpack-dev-server

Copier après la connexion

configwebpack.config.dev.js

Basé sur

const path = require(&#39;path&#39;);
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
const OpenBrowserPlugin = require(&#39;open-browser-webpack-plugin&#39;);

const paths = require(&#39;./paths&#39;);

const hostname = process.env.HOST || &#39;localhost&#39;;
const port = process.env.PORT || 3000;

const plugins = [
  new HtmlWebpackPlugin({
    title: &#39;webpack babel react revisited&#39;,
    filename: path.join(paths.appDist, &#39;index.html&#39;),
  }),
  new OpenBrowserPlugin({ url: `http://${hostname}:${port}` }),
];

const config = {
  entry: {
    app: path.join(paths.appSrc, &#39;app&#39;),
  },
  output: {
    path: paths.appDist,
    filename: &#39;assets/js/[name].js&#39;,
  },
    resolve: {
    extensions: [&#39;.js&#39;, &#39;.jsx&#39;],
  },
  plugins,
  devServer: {
    contentBase: paths.appDist,
    compress: true,
    port,
  },
};

module.exports = config;

Copier après la connexion

, nous avons ajouté le plug-in open-browser-webpack-plugin et la configuration

, le plug-in webpack.config.prod.js, comme son nom l'indique, nous aidera à ouvrir automatiquement l'adresse devServer qui nous est finalement retournée open-browser-webpack-plugindev servermise à jour

package.json

Maintenant, nous pouvons la démarrer comme suit

"scripts": {
  "clean": "rimraf dist *.log .DS_Store",
  "webpack:dev":
    "NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress",
  "webpack:prod":
    "NODE_ENV=production webpack --config config/webpack.config.prod.js --progress",
  "start": "yarn run clean && yarn run webpack:dev",
  "build": "yarn run clean && yarn run webpack:prod"
}

Copier après la connexion

Après l'avoir démarré, vous sentez-vous bien un instant ?

yarn start

Copier après la connexion

Babel

Afin de pouvoir l'utiliser

et les versions supérieures, nous avons besoin d'un

, nous choisissons ES6, qui peut convertir 转换编译器 en code pouvant s'exécuter dans le navigateur. De plus, il dispose également d'une extension Babel intégrée, qui peut On dit que son émergence a favorisé le développement. de ES6React JSXJavaSciptTous, nous installons les packages de dépendances suivants

Créons

yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react

Copier après la connexion

le fichier de configuration par défaut

Babel.babelrc

Cela indique

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

Copier après la connexion

d'utiliser les deux

Babelpresets que nous venons d'installer. Ensuite, mettez à jour le

fichier de configuration

webpack

Après la mise à jour, même si cela ne se voit pas. Quel changement, mais le fait qu'on puisse utiliser

config.module = {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [&#39;babel-loader&#39;],
    },
  ],
}

Copier après la connexion

au lieu de

ES6React

Enfin, ajoutons

, ce qui peut aussi être la raison pour laquelle vous lisez cet article

React Tout d'abord, installons-le d'abord

Remplacez

yarn add react react-dom

Copier après la connexion

console.log

par le code suivant car nous voulons ajouter

import React, { Component } from &#39;react&#39;;
import { render } from &#39;react-dom&#39;;

export default class Hello extends Component {
  render() {
    return <h1>Hello from 枫上雾棋!</h1>;
  }
}

render(<Hello />, document.getElementById(&#39;app&#39;));

Copier après la connexion

, nous devons donc modifier

Configuration<p id="app"></p>html-webpack-plugin

La référence

new HtmlWebpackPlugin({
  template: path.join(paths.appSrc, &#39;index.html&#39;),
}),

Copier après la connexion

est la suivante

template

Ensuite, il est temps d'assister au miracle

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>webpack babel react revisited</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <p id="app"></p>
  </body>
</html>

Copier après la connexion

重新启动服务，你有没有发现搭建一个 React 应用程序就这么简单

接下来，大家就可以 自行探索，添加更多的东西来适应自身应用程序的需要

下面再补充一下如何添加 CSS 和 图片

CSS

每个 web 应用程序都离不开 CSS，我们在 src 目录中创建 style.css

body,
html,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
}

#app {
  padding: 30px;
  font-family: &#39;微软雅黑&#39;;
}

Copier après la connexion

将其添加到应用程序中我们需要使用 css-loader

如果想将 css 注入 style 标签中，我们还需要 style-loader，通常，是将这两个结合使用

我们使用 extract-text-webpack-plugin 将其解压到外部

为此，我们首先安装

yarn add --dev css-loader style-loader extract-text-webpack-plugin

Copier après la connexion

然后在 app.js 中导入 style.css

import &#39;./style.css&#39;;

Copier après la connexion

最后更新 webpack 配置文件

config.module = {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: &#39;style-loader&#39;,
        use: &#39;css-loader&#39;,
      }),
    },
  ],
}

config.plugins.push([
  new ExtractTextPlugin("styles.css"),
])

Copier après la connexion

看起来稍显复杂，但是大功告成，为了更好地使用它，我们都得经历这个过程

重新启动服务，你会发现你的 dist 目录中多了一个 styles.css

图片

最后我们增加 file-loader 来处理我们引入的图片等文件

首先，安装 file-loader

yarn add --dev file-loader

Copier après la connexion

我们在 src/images 中放入一张图片，在 app.js 中导入

import avatar from &#39;./images/avatar.jpg&#39;;

export default class Hello extends Component {
  render() {
    return (
      <p>
        <img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} />
      </p>
    );
  }
}

Copier après la connexion

更新 webpack 配置文件

config.module = {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: &#39;file-loader&#39;,
          options: {
            name: &#39;[name].[ext]&#39;,
            outputPath: &#39;assets/images/&#39;,
          },
        },
      ],
    },
  ],
}

Copier après la connexion

重启服务，哈哈