Webpack、Babel、React に関する知識

始める前に

記事を書く前に、誰もが JavaScript、ノード パッケージ管理ツール、Linux ターミナル操作 の基本的なスキルをすでに持っていることを前提としています。 code> 、次に、React プロジェクトを最初から構築する方法を段階的に説明しますJavaScript，Node 包管理工具，Linux 终端操作 这些基本技能，接下来，我将一步一步指引大家从头搭建一个 React 项目

最终实现的效果

我们将使用  Webpack 和 Babel 搭建一个 React 应用，我们的目的很清晰，就是 更好的理解和掌握这些工具的使用

我们创建的应用程序既要做到 最小，也要遵循 最佳实践，为不是特别熟练的同学巩固一下基础

初始化

创建你的项目，并添加的你的配置文件 package.json

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

yarn init

Webpack

我们首先安装 Webpack，它是目前非常流行的 模块打包器，它将应用程序包含的每个模块打包成少量的 块，以便这些代码从服务器加载到浏览器中

yarn add webpack --dev

接下来，我们开始书写一些模块。我们将源文件 app.js 保存到 src 目录中

/** app.js */

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

然后，我们跑一下 Webpack

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

如果你打开生成的 app.bundle.js，你会发现上面是 webpack 的模块处理代码，下面是我们书写的 console.log

这条指令是将我们的 app.js 作为 Webpack 的 入口文件，将结果输出到 dist 文件夹中，指令有些冗长，在实际开发中，我们使用 webpack 配置文件来代替，为了文档结构看起来更加清晰，参考 目录 如下

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

下面是参考 配置

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

这个文件不是必须的，但在项目增大后，它的意义就瞬间出来了

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;

这里我们还添加了一个 html-webpack-plugin，它简化了我们 HTML 文件的创建，安装我们就不再这里赘述了，如果还不知道的同学可以点击链接查看

其中，我们还使用了一个 语法糖，这样在我们导入 .js，.jsx 时就不需要指定扩展名了

接下来，我们指定配置文件再跑一下 Webpack

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

发现除了实现上面的效果外，还自动帮我们生成了一个 index.html，我们可以点击这个 html，在控制台中查看效果，相比上面，是不是方便了很多

当然，最后我们肯定也不是使用这种方式来 build，打开 package.json，添加如下 脚本命令，然后执行 yarn build，是不是瞬间感觉 nice 了很多

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

Webpack dev server

除此之外，Webpack 为我们提供了一个的 dev server，它还支持 模块热替换

首先，安装 webpack-dev-server

yarn add --dev webpack-dev-server

在 config 目录中添加配置文件 webpack.config.dev.js

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;

在 webpack.config.prod.js 的基础上，我们增加了 open-browser-webpack-plugin 插件和 devServer 配置，open-browser-webpack-plugin 插件顾名思义，会帮我们自动打开 dev server 最后返回给我们的地址

更新 package.json

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

现在，我们就可以通过如下方式来启动

yarn start

启动后，有没有瞬间感觉很棒

Babel

为了能够使用 ES6 以及更高版本，我们需要一个 转换编译器，我们选择 Babel，它能将 ES6 转换成可以在浏览器中运行的代码，除此之外，他还内置了 React JSX 扩展，可以说它的出现推动了 JavaScipt 的发展

所有，我们安装下面这些依赖包

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

创建 Babel 默认配置文件 .babelrc

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

这个是告诉 Babel 用我们刚刚安装的两个 presets

接下来，更新 webpack 配置文件

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

更新以后，虽然看不到什么变化，但事实上我们可以使用 ES6 了

React

最后，我们来添加 React，这也可能是你阅读这篇文章的原因

首先，我们还是先安装它

yarn add react react-dom

用下面代码替换 console.log

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>，所以我们要修改一下 html-webpack-plugin 的配置

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

参考 template

最終的な効果

Webpack と Babel< /code> <code>React アプリケーションを構築する目的は非常に明確です。それは、これらのツールの使い方をよりよく理解し、使いこなすことです🎜🎜作成するアプリケーションは、< code> 最小限 ですが、特にスキルが高くない学生の基礎を強化するための ベスト プラクティス にも従います 🎜🎜初期化🎜🎜 プロジェクトを作成し、構成ファイル package .json を追加します🎜

<!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>

🎜Webpack🎜🎜 まず、Webpack をインストールします。これは、アプリケーションに含まれるすべてのモジュールを含む非常に人気のある モジュール パッケージャー です。これを小さなパッケージにパッケージ化します。コードをサーバーからブラウザにロードできるようにするための chunk の数🎜

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

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

🎜 次に、いくつかのモジュールの作成を開始します。ソース ファイル app.js を src ディレクトリに保存します🎜

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

🎜次に、Webpack を実行します🎜

import './style.css';

🎜生成された < code>app.bundle.js を見ると、上記が webpack のモジュール処理コードで、次が console.log であることがわかります🎜🎜手順は、app.js を Webpack の entry file として使用し、結果を dist に出力することです。 code> フォルダーの説明は少し長くなりますが、実際の開発では、ドキュメント構造をわかりやすくするために、代わりに webpack 構成ファイルを使用します。 > 以下の通り🎜

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

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

🎜以下は参考< code>Configuration🎜🎜paths.js🎜

yarn add --dev file-loader

🎜このファイルは必要ありませんが、プロジェクトが大きくなってから意味が出てきますすぐに🎜🎜webpack.config .prod.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>
    );
  }
}

🎜ここでは、HTML ファイルの作成を簡素化する html-webpack-plugin も追加しました。インストールの詳細については、ここで説明します。まだ知らない学生は、リンクをクリックして表示できます 🎜🎜 その中で、構文糖衣も使用します。そのため、をインポートするときに、 >.js, .jsx の場合は拡張子を指定する必要はありません🎜🎜次に設定ファイルを指定してWebpackを実行します🎜

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

🎜上記の効果を達成することに加えて、index for us .html も自動的に生成されます。この html をクリックすると、コンソールで効果を確認できます。上のほうがずっと便利です🎜🎜 もちろん、最終的には、このメソッドを使用して build、package.json を開いて、次の を追加することは絶対にありません。 script コマンド を実行し、yarn build を実行します。 にはすぐに >素晴らしい がたくさんあると思いますか?さらに、 Webpack は dev サーバー を提供し、Module hot replace もサポートします🎜🎜 まず、webpack-dev-server をインストールします。 code>🎜rrreee🎜 設定ファイル webpack.config.dev を <code>config ディレクトリに追加します。js🎜rrreee🎜 webpack.config.prod.js< に基づいています/code> に、open-browser-webpack-plugin プラグインと <code>devServer 設定を追加しました。open-browser-webpack-plugin 名前が示すように、このプラグインはin は、dev サーバー を自動的に開き、最終的にアドレスを返すのに役立ちます🎜🎜package.json を更新します🎜rrreee🎜 さて、次の方法で起動できます🎜 rrreee🎜起動後、しばらくは気分が良くなりますか🎜🎜Babel🎜🎜 ES6 以降を使用できるようにするには、Conversion Compiler が必要です。 Babel を選択すると、ES6 をブラウザで実行できるコードに変換できます。さらに、React JSX 拡張機能も組み込まれています。この出現により、JavaScipt の開発が促進されたと言えます🎜🎜すべて、次の依存パッケージをインストールします🎜rrreee🎜 Babel</code code> を作成します。 デフォルトの設定ファイル <code> >.babelrc🎜rrreee🎜これは、インストールしたばかりの 2 つの プリセット を使用するように Babel に指示します🎜🎜次に、< code>webpack 設定ファイルを更新します🎜rrreee🎜更新後、何も変化は見られませんが、実際には ES6 が使用できるようになります🎜🎜React🎜🎜 最後に、 React を追加しましょう。あなたがこの記事を読んでいる理由🎜🎜まず、インストールしましょう🎜rrreee🎜 console.log を次のコードに置き換えてください🎜rrreee🎜 < code>

であるため、html-webpack-plugin の構成を変更する必要があります 🎜rrreee🎜template を参照してください以下の通りです🎜そうです🎜次のステップは奇跡を目撃することです🎜

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

以上がWebpack、Babel、React に関する知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。