Connaissance de Webpack, Babel et React

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

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

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

dans le répertoire app.js src

/** app.js */

console.log('Hello from 枫上雾棋!');

Ensuite, nous exécutons

Webpack

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

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

Ce qui suit est la référence

配置

paths.js

const path = require('path');
const fs = require('fs');

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

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

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('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const paths = require('./paths');

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

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

module.exports = config;

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

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

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

configwebpack.config.dev.js

Basé sur

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

const paths = require('./paths');

const hostname = process.env.HOST || 'localhost';
const port = process.env.PORT || 3000;

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

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

module.exports = config;

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

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

yarn start

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

le fichier de configuration par défaut

Babel.babelrc

Cela indique

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

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: ['babel-loader'],
    },
  ],
}

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

console.log

par le code suivant car nous voulons ajouter

import React, { Component } from 'react';
import { render } from 'react-dom';

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

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

, nous devons donc modifier

Configurationcec9c1bb071f21a3af0e115be5b0b2e994b3e26ee717c64999d7867364b1b4a3html-webpack-plugin

La référence

new HtmlWebpackPlugin({
  template: path.join(paths.appSrc, 'index.html'),
}),

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>

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

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

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

CSS

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

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

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

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

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

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

为此，我们首先安装

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

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

import './style.css';

最后更新 webpack 配置文件

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

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

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

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

图片

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

首先，安装 file-loader

yarn add --dev file-loader

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

import avatar from './images/avatar.jpg';

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

更新 webpack 配置文件

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

重启服务，哈哈

总结

如果有什么问题，可以查看 webpack-babel-react-revisited 仓库

现在，大家对搭建 React 应用程序是不是感觉轻松了很多，但 React 整个技术栈并不止包括这些，还有 Redux，React Router，单元测试，代码校验 等内容，关于 React 其他内容，欢迎查看日志其他文章

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!