Kenntnisse über Webpack, Babel und React

Bevor Sie beginnen

Bevor Sie den Artikel schreiben, gehe ich davon aus, dass Sie bereits über die Grundkenntnisse von JavaScript, Node 包管理工具, Linux 终端操作 verfügen. Als nächstes werde ich Sie Schritt für Schritt beim Aufbau anleiten eine von Grund auf React Der Endeffekt des Projekts

Wir werden Webpack und Babel verwenden, um eine React-Anwendung zu erstellen, nämlich 更好的理解和掌握这些工具的使用

Die von uns erstellten Anwendungen müssen beides tun 最小 und folgen 最佳实践, um die Grundlage für nicht besonders qualifizierte Studenten zu festigen

Initialisieren

Erstellen Sie Ihr Projekt , und fügen Sie Ihre Konfigurationsdatei hinzu package.json

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

yarn init

Webpack

Wir installieren zuerst Webpack, es ist derzeit sehr beliebt 模块打包器, es enthält alle Module, die in einem verpackt sind kleine Menge 块, damit der Code vom Server in den Browser geladen wird

yarn add webpack --dev

Als nächstes beginnen wir mit dem Schreiben einiger Module. Wir speichern die Quelldatei app.js im Verzeichnis src

/** app.js */

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

Dann führen wir Webpack

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

Wenn Sie das generierte app.bundle.js öffnen, Sie aus Ich werde feststellen, dass das Obige der Modulverarbeitungscode von webpack ist und das Folgende der console.log

ist, den wir geschrieben haben. Diese Anweisung besteht darin, unser app.js als Webpack von 入口文件 zu verwenden und geben Sie das Ergebnis in dist aus. In der tatsächlichen Entwicklung verwenden wir stattdessen die webpack-Konfigurationsdatei. Um die Dokumentstruktur klarer zu gestalten, beziehen Sie sich auf 目录

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

Das Folgende ist die Referenz 配置

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'),
};

Diese Datei ist nicht notwendig, aber wenn das Projekt wächst, wird ihre Bedeutung sofort deutlich kommt heraus

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;

Hier haben wir auch ein HTML-Webpack-Plugin hinzugefügt, das die Erstellung unserer HTML-Datei vereinfacht. Wir werden hier nicht näher darauf eingehen Wenn Sie es noch nicht wissen, können Sie auf den Link

klicken. Wir verwenden auch ein 语法糖, sodass wir beim Import keine Angabe der Erweiterung machen müssen >, .js .jsx

Als nächstes geben wir die Konfigurationsdatei an. Führen Sie

Webpack

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

erneut aus und stellen Sie fest, dass zusätzlich zum oben genannten Effekt auch automatisch ein <🎜 generiert wird > für uns. Wir können darauf klicken

, um den Effekt in der Konsole anzuzeigen. Ist das nicht viel praktischer? index.htmlhtml Natürlich verwenden wir das definitiv nicht Methode zu

. Öffnen Sie

und führen Sie dann build aus. Ist das nicht ein sofortiges Gefühl? Serverpackage.json脚本命令Darüber hinaus stellt yarn build uns einen nice zur Verfügung, der auch

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

unterstützt.

Zunächst installieren

Webpackdev serverKonfigurationsdateien hinzufügen Im 模块热替换-Verzeichnis

webpack-dev-server

Basierend auf

yarn add --dev webpack-dev-server

haben wir das Open-Browser-Webpack-Plugin-Plug-In und die

-Konfiguration hinzugefügt, das config-Plug-In. Wie der Name schon sagt, wird es uns helfen, die Adresse automatisch zu öffnen webpack.config.dev.jsendlich an uns zurückgegeben

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;

Aktualisierung

webpack.config.prod.jsdevServer open-browser-webpack-pluginJetzt können wir es wie folgt startendev server

Fühlst du dich nach dem Start für einen Moment großartig?package.json

Babel

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

Um es nutzen zu können

und höhere Versionen benötigen wir ein

yarn start

, wir wählen

, das

in Code konvertieren kann, der im Browser ausgeführt werden kann. Darüber hinaus verfügt es auch über eine integrierte

-Erweiterung, die die Entwicklung vorantreiben soll von

ES6Alles, wir installieren die folgenden Abhängigkeitspakete 转换编译器BabelES6Erstellen Sie React JSX Standardkonfigurationsdatei JavaScipt

Dies sagt

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

Um die beiden

Babel.babelrc zu verwenden, die wir gerade installiert haben, aktualisieren Sie als Nächstes die

Konfigurationsdatei

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

BabelNach dem Update ist es zwar nicht zu sehen, aber was für eine Änderung die Tatsache, dass wir presets anstelle von

Reagierenwebpack

verwenden können. Zum Schluss fügen wir

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

hinzu, was möglicherweise auch der Grund ist, warum Sie diesen Artikel lesen

ES6 Installieren wir es zunächst

Ersetzen Sie

React

durch den folgenden Code, da wir

hinzufügen möchten und daher <🎜 ändern müssen > Konfiguration

yarn add react react-dom

console.logReferenz

lautet wie folgt

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

<p id="app"></p>Als nächstes ist es Zeit, Zeuge des Wunders zu werdenhtml-webpack-plugin

重新启动服务，你有没有发现搭建一个 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 其他内容，欢迎查看日志其他文章

Das obige ist der detaillierte Inhalt vonKenntnisse über Webpack, Babel und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!