ArthurSlog
SLog-103
Year·1
Guangzhou·China
October 29th 2018

知常曰明不知常妄作兇

開發環境MacOS(Mojave 10.14 (18A391))

信息源

開始編碼

整個工程更新爲四大前端-大後端的結構
四大前端分爲：客戶端前端 -> 運營前端 -> 管理前端 -> 開發前端 (實現業務解耦)
大後端則承接了上述所有前端的後臺交互
本次來開荒 ‘開發前端’
作爲首尾的‘客戶端前端’和‘開發前端’是項目的必要選項
中間部分根據業務可以進行無限的解耦
ok 現在來配置‘開發前端’的環境

開發前端界面

一個下拉選擇欄：用於選擇測試接口（就是在開發階段我們選擇把數據傳給後端的指定接口）
input輸入框：根據上面的選擇這裏輸入的是準備發給後端的數據
測試按鈕：當點擊測試按鈕的時候會調用我們上面選中的函數和數據向後端發起請求
結果顯示框：顯示後端返回的所有數據

Contract

開發模式，應該以降低開發成本爲原則

一個網頁的基礎是由 HTML，CSS 和 JS 構成的
這些網頁前端代碼通過瀏覽器打開後能夠直接運行

當時爲了降低開發成本
現在我們寫的大部分代碼並不是原生的 HTML，CSS 和 JS
而是基於它們擴展出來的更上層的語法

所以在開發的過程中
我們需要一個編譯的過程 把上層代碼編譯爲原生的 HTML，CSS 和 JS

編譯上層代碼的工具有很多 
比如
使用babel工具 把ES6+的代碼 編譯爲 ES5的代碼
使用Less工具 把less代碼 編譯爲 css代碼

這些編譯工具 成爲了前端研發體系的一部分
在工具的更上一層 漸漸出現了統一管理這些工具的超級工具
比如 webpack
通過 webpack工具 可以讓所有工具協同工作 進一步降低開發的成本

除了編譯工具之外
超級工具webpack 還一直處於發展之中
在這個期間 出現了幫助開發人員 自動刷新瀏覽器的工具、壓縮代碼的工具
、代碼風格檢測的工具、代碼單元測試的工具、...

發展到當前的時間點 
類似webpack的超級工具漸漸的把所有工具集成在自己身上
更進一步的降低開發的成本

在發展的過程中 就是在經歷着從不成熟到成熟
所以紛亂、繁雜 始終相伴

堅守 一切爲降低成本 爲原則
大家一同共勉 前進

註釋並不是冷冰冰的文字

註釋應該是一個充滿溫暖的地方 記載着無數不甘寂寞的靈魂

所以 在我的註釋裏 不限制內容和格式 可以盡情的記錄下任何信息

最後 在構建生產環境代碼的時候 再把註釋信息進行屏蔽

sudo npm init -y

add webpack and webpack-cli as a dev dependency to our project
We installed webpack-cli so that we can use webpack in the command line

sudo npm install webpack webpack-cli --save-dev

sudo npm install react react-dom --save

In order for React to work, we need to install Babel alongside with it
We need Babel to transpile ES6 and JSX to ES5
So:

sudo npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

babel-core: Transforms ES6 code to ES5
babel-loader: Webpack helper to transpile code, given the the preset
babel-preset-env: Preset which helps babel to convert ES6, ES7 and ES8 code to ES5
babel-preset-react: Preset which Transforms JSX to JavaScript
The less-loader requires less as peerDependency
Thus you are able to control the versions accurately.
Use the css-loader or the raw-loader to turn it into a JS module and
the ExtractTextPlugin to extract it into a separate file

npm install less-loader less css-loader style-loader --save-dev

Chain the less-loader with the css-loader and the style-loader to immediately apply all styles to the DOM

webpack.config.js

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

Create an index.js file inside root of the /src folder
for now add the following line code inside it
This file will be the entry point to our app

./src/index.js

console.log("Hello Arthur")

Create an index.html file inside root of the /src folder and add following code inside it

./src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Boilerplate</title>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

Create a webpack.config.js in the root directory of the project
so that we can define rules for our loaders
Define the entry point and output directory of our app inside the webpack.config.js

./webpack.config.js

const path = require("path");

const config = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  }
};

module.exports = config;

In the above code
Webpack will bundle all of our JavaScript files into bundle.js file inside the /dist directory
Add some loaders inside this file, which will be responsible for loading and bundling the source files

./webpcak.config.js

const path = require("path");

const config = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "less-loader"]
      }
    ]
  }
};

module.exports = config;

Here babel-loader is used to load our JSX/JavaScript files and
less-loader is used to load all of the Less files to CSS files
css-loader is used to load and bundle all of the CSS files into one file and
style-loader will add all of the styles inside the style tag of the document
Create a .babelrc file inside root of the project directory with the following contents inside of it

./.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

This file will tell babel which presets to use for transpiling the code
Here we are using two presets:
env: This preset is used to transpile the ES6/ES7/ES8 code to ES5
react: This preset is used to transpile JSX code to ES5
Add the following lines of code inside the script object of the package.json file as below:

"start": "webpack --mode development --watch",
"build": "webpack --mode production"

Here i have used watch flag
So whenever there is a change in source files
Webpack will automatically compile all the source files
There are two modes in webpack 4
the production mode which produces optimized files ready for use in production
and development mode which produces easy to read code
and gives you best development experience
Html-webpack-plugin：
Now we also need to install html-webpack-plugin
this plugin generates an HTML file
injects the script inside the HTML file and writes this file to dist/index.html

sudo npm install html-webpack-plugin --save-dev

Now we need to configure this plugin inside the webpack.config.js file

./webpcak.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const config = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index-bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
};

module.exports = config;

Here the value of template key is the file index.html
that we created earlier and it uses this file as a template
and generates new file named index.html inside the /dist folder
with the script injected
But this approach has a downside that you have to manually refresh the webpage
in order to see the changes you have made
To have webpack watch our changes and refresh webpage whenever any change
is made to our components, we can install webpack-dev-server
Webpack-dev-server:

npm install webpack-dev-server --save-dev

And change the package.json start script like below:

"start": "webpack-dev-server --mode development --open --hot"

因爲有一些比較細節的地方使用英文來理解比較準確
以上就是對開發環境的一個配置
這裏是配置好的工程目錄結構

工程文件已經上傳至Github：https://github.com/BlessedChild/ArthurSlogStore
至此，完成了‘開發前端’的開發環境的初始化配置。

歡迎關注我的微信公衆號 ArthurSlog

如果你喜歡我的文章歡迎點贊留言
謝謝

Slog103_使用React框架進行前端開發14

開發環境MacOS(Mojave 10.14 (18A391))

信息源

開始編碼

開發前端界面

Contract

Slog72_顯示上傳的圖片文件GET！（微信小程序之雲開發-全棧時代4）

Slog76_用一個簡單的遊戲演示與數據庫的交互（微信小程序之雲開發-全棧時代6）

Slog74_UI設計、整理和佈局GET！（微信小程序之雲開發-全棧時代5）

Slog105_我回來了

Slog104_使用React框架進行前端開發15

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結