重溫 Webpack, Babel 和 React

時間  2019-11-16
標籤 重溫 webpack babel react 欄目 React 简体版
原文   原文鏈接

圖片描述

開始以前

在書寫文章以前，我假設你們已經有了 JavaScript，Node 包管理工具，Linux 終端操做 這些基本技能，接下來，我將一步一步指引你們從頭搭建一個 React 項目css

最終實現的效果

咱們將使用 Webpack 和 Babel 搭建一個 React 應用，咱們的目的很清晰，就是 更好的理解和掌握這些工具的使用html

咱們建立的應用程序既要作到 最小，也要遵循 最佳實踐，爲不是特別熟練的同窗鞏固一下基礎java

初始化

建立你的項目，並添加的你的配置文件 package.jsonnode

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

yarn init

Webpack

咱們首先安裝 Webpack，它是目前很是流行的 模塊打包器，它將應用程序包含的每一個模塊打包成少許的 塊，以便這些代碼從服務器加載到瀏覽器中react

yarn add webpack --dev

接下來，咱們開始書寫一些模塊。咱們將源文件 app.js 保存到 src 目錄中webpack

/** app.js */

console.log('Hello from 楓上霧棋!');

而後，咱們跑一下 Webpackgit

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

若是你打開生成的 app.bundle.js，你會發現上面是 webpack 的模塊處理代碼，下面是咱們書寫的 console.loggithub

這條指令是將咱們的 app.js 做爲 Webpack 的 入口文件，將結果輸出到 dist 文件夾中，指令有些冗長，在實際開發中，咱們使用 webpack 配置文件來代替，爲了文檔結構看起來更加清晰，參考 目錄 以下web

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

下面是參考 配置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('app'));

由於要添加 <div id="app"></div>，因此咱們要修改一下 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>
    <div id="app"></div>
  </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 (
      <div>
        <img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} />
      </div>
    );
  }
}

更新 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 其餘內容，歡迎查看日誌其餘文章

原文連接：Setting up Webpack, Babel and React from scratch, revisited

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程