關於Webpack, Babel 和 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 如下

<!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 其他内容，欢迎查看日志其他文章

以上是關於Webpack, Babel 和 React的知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！