如何使用影象為自定義 Hello 世界構建管道

Created: November-22, 2018

第 1 步：安裝 Node.js.

你將構建的構建管道基於 Node.js，因此你必須在第一個例項中確保已安裝此管道。有關如何安裝 Node.js 的說明，你可以在此處檢視 SO 文件

第 2 步：將專案初始化為節點模組

在命令列上開啟專案資料夾，然後使用以下命令：

npm init

對於這個例子的目的，你可以隨意取預設值，或者，如果你想在這一切都意味著你可以簽出更多的資訊本上設定包的配置 SO 文件。

第 3 步：安裝必要的 npm 包

在命令列上執行以下命令以安裝此示例所需的軟體包：

npm install --save react react-dom

然後對於 dev 依賴項執行此命令：

npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader

最後 webpack 和 webpack-dev-server 是值得全域性安裝的東西，而不是作為專案的依賴項，如果你更願意將它作為依賴項新增，那麼這將是有效的，我不這樣做。這是執行的命令：

npm install --global webpack webpack-dev-server

第 3 步：將 .babelrc 檔案新增到專案的根目錄

這將設定 babel 使用你剛剛安裝的預設。你的 .babelrc 檔案應如下所示：

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

第 4 步：設定專案目錄結構

在目錄的根目錄中設定一個類似於下面的目錄結構：

|- node_modules
|- src/
  |- components/
  |- images/
  |- styles/
  |- index.html
  |- index.jsx
|- .babelrc
|- package.json

注意：node_modules，.babelrc 和 package.json 都應該已經從之前的步驟中包含它們，所以你可以看到它們適合的位置。

步驟 5：使用 Hello World 專案檔案填充專案

這對於構建管道的過程並不重要，所以我只是給你這些程式碼，你可以將它們複製貼上到：

SRC /元件/ HelloWorldComponent.jsx

import React, { Component } from 'react';

class HelloWorldComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {name: 'Student'};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({name: e.target.value});
  }

  render() {
    return (
      <div>
        <div className="image-container">
          <img src="./images/myImage.gif" />
        </div>
        <div className="form">
          <input type="text" onChange={this.handleChange} />
          <div>
            My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
          </div>
        </div>
      </div>
    );
  }
}

export default HelloWorldComponent;

SRC /影象/ myImage.gif

你可以隨意替換任何你喜歡的影象，只是為了證明我們可以繫結影象。如果你提供自己的影象並將其命名為不同的影象，則必須更新 HelloWorldComponent.jsx 以反映你的更改。同樣，如果你選擇具有不同副檔名的影象，則需要使用適當的正規表示式修改 webpack.config.js 中影象載入器的 test 屬性以匹配你的新副檔名。

SRC /風格/ Styles.css 中

.form {
  margin: 25px;
  padding: 25px;
  border: 1px solid #ddd;
  background-color: #eaeaea;
  border-radius: 10px;
}

.form div {
  padding-top: 25px;
}

.image-container {
  display: flex;
  justify-content: center;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning to build a react pipeline</title>
</head>
<body>
  <div id="content"></div>
  <script src="app.js"></script>
</body>
</html>

index.jsx

import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';

require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');

render(<HelloWorldComponent />, document.getElementById('content'));

第 6 步：建立 webpack 配置

在專案的根目錄中建立一個名為 webpack.config.js 的檔案，並將此程式碼複製到其中：

webpack.config.js

var path = require('path');

var config = {
  context: path.resolve(__dirname + '/src'),
  entry: './index.jsx',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname + '/dist'),
  },
  devServer: {
    contentBase: path.join(__dirname + '/dist'),
    port: 3000,
    open: true,
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: "style!css"
      },
      {
        test: /\.gif$/,
        loaders: [
          'file?name=[path][name].[ext]',
          'image-webpack',
        ]
      },
      { test: /\.(html)$/,
        loader: "file?name=[path][name].[ext]"
      }
    ],
  },
};

module.exports = config;

第 7 步：為你的管道建立 npm 任務

為此，你需要將兩個屬性新增到專案根目錄中 package.json 檔案中定義的 JSON 的 scripts 鍵。使你的指令碼鍵看起來像這樣：

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

test 指令碼已經存在，你可以選擇是否保留，這個例子並不重要。

第 8 步：使用管道

從命令列，如果你在專案根目錄中，你現在應該能夠執行命令：

npm run build

這將繫結你構建的小應用程式並將其放在將在專案資料夾的根目錄中建立的 dist/目錄中。

如果你執行命令：

npm start

然後，你構建的應用程式將在 webpack dev 伺服器例項內的預設 Web 瀏覽器中提供。