軟體技術-Web-React-MD-Aframe專案快速搭建

React · 發表 2019-04-06 18:24:51

摘要：歡迎關注我的專欄( つ•̀ω•́)つ【人工智慧通識】這篇文章介紹如何使用VSCode快速初始化一個基於React.js的Web專案，React.js是當前最主流的Web開發框架之一,另一個是Vue.js。前提工作首先我們需要安裝(或確認已安裝)： ...

歡迎關注我的專欄( つ•̀ω•́)つ【人工智慧通識】

這篇文章介紹如何使用VSCode快速初始化一個基於React.js的Web專案，React.js是當前最主流的Web開發框架之一,另一個是Vue.js。

前提工作

首先我們需要安裝(或確認已安裝)：

VSCode
Git
Nodejs

然後我們需要：

建立專案資料夾（GoCraft）；
初始化本地Git倉庫 git init ；
在Github網站建立對應的無初始化的倉庫(GoCraft)；
設定Github遠端倉庫 git remote add ... ；
建立 cli 資料夾，進入並初始化 npm init
建立 .gitignore 檔案忽略掉 cli/node_modules 資料夾；

以上步驟可以參考這個文章的前半段內容完成。

建立index檔案

我們建立兩個檔案 cli/dist/index.html 和``cli/src/index.js`內容分別如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React-MD-Aframe</title>
<script src="main.js"></script>
</head>
<body>
<h1>Hello World!!</h1>
<div id="root"></div>
</body>
</html>

(function () {
console.log("Hello!");
}());

安裝和配置Webpack

使用下面的命令安裝(管理員或sudo)：

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

可能會要幾分鐘，也可能會出現一些錯誤，但只要最後正常完成即可：

為我們的 package.json 增加兩個指令碼命令(注意行尾的逗號)：

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

建立 cli/webpack.config.js :

const path = require('path');
module.exports = {
entry: path.join(__dirname, "src/index.js"), //入口檔案
output: {
filename: 'main.js', //編譯後的檔案
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, "dist"), //編譯好的檔案放在這裡
compress: true,
port: 9000 //本地開發伺服器埠
}
}

然後我們執行 npm run build 可以生成檔案，執行 npm run dev 可以啟動開發服，這會自動開啟頁面 http://localhost:9000/ 顯示 Hello world! 文字。

注意，要停止 dev 服務，可以按Ctrl+C快捷鍵。建議新開單獨的命令列終端來執行別的命令，而不必每次都停止它。

開啟頁面的控制檯 Console ，這時候我們在VSCode裡面修改 src/index.js 檔案，例如改為 console.log("Hello world!!"); ，瀏覽器頁面控制檯內將自動重新整理輸出新的內容。

使用Webpack的Html外掛

如果我們修改 dist/index.html 檔案，頁面不會自動重新整理。而且直接把 index.html 這個原始碼檔案放在 dist 下面也並不合適。

安裝 html-webpack-plugin 外掛(管理員或sudo)：

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

然後我們修改 webpack.config.js 檔案內容，開頭增加 HtmlWebpackPlugin 並結尾增加 plugin 內容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src/index.js"), //入口檔案
output: {
filename: 'main.js', //編譯後的檔案
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, "dist"), //編譯好的檔案放在這裡
compress: true,
port: 9000 //本地開發伺服器埠
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html')
})
]
}

然後我們把 dist/index.html 移動到 src/index.html ，並把裡面的 <script type="text/javascript" src="main.js"></script> 刪除，因為我們的外掛會自動補充這個內容。

重啟 npm run dev 服務。修改 src/index.html 內容，頁面將自動重新整理變化。

安裝React

使用下面命令安裝：

sudo npm install --save react react-dom

修改 src/index.js ：

import React from "react";
import ReactDOM from "react-dom";

let HelloWorld = () => {
return <h1>Hello React!</h1>
}

ReactDOM.render(
<HelloWorld/>,
document.getElementById("root")
);

儲存時候瀏覽器控制檯會出錯，這是由於webpack還不知道怎麼處理React這種html標記和js語句混用的情況。

安裝和配置Babel

Babel可以告訴webpack該如何做。使用下面的語句安裝：

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

在專案目錄下建立 cli/.babelrc 檔案，內容：

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

然後再 webpack.config.js 中新增新的 module.rules 內容，指定 .js 格式檔案都由 babel-loader 來處理，而且不處理 node_modules 資料夾內容：

module: {
rules: [{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: 'babel-loader',
}]
},
plugins: [
new HtmlWebpackPlugin({
...

然後重新啟動 npm run dev ，可以看到能夠正常編譯，出現 Hello Reac! 文字。

CSS載入器

安裝特殊的css檔案處理器：

sudo npm install --save-dev style-loader css-loader sass-loader node-sass

建立一個 src/index.scss 檔案：

body {
div#root{
background-color: #222;
color: #8EE4AF;
}
}

在 src/index.js 中匯入它，開頭增加一行：

import "index.scss";

這時候頁面控制檯編譯失敗。我們修改 webpack.config.js ,增加樣式的載入器內容：

module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(css|scss)$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},

重新啟動 npm run dev ，可以看到 Hello React! 背景變黑色，文字變綠色。

檔案載入器

用下面命令安裝：

npm install --save-dev file-loader @babel/plugin-proposal-class-properties

修改 webpack.config.js ，增加檔案載入器內容：

module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(css|scss)$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
loaders: ['file-loader']
}
]
},

然後將 .babelrc 檔案修改為：

{
"presets": [
"@babel/env",
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}

到這裡為止，可以作為基本的React+webpack專案初始化使用。你可以在Github上獲取以上程式碼： react-webpack-base

Material Design

安裝核心元件及可選元件（下面只包含了SVG圖示）：

npm install @material-ui/core --save-dev

npm install @material-ui/icons --save-dev

安裝好了之後就可以在頁面上直接在 index.js 中匯入並使用：

import React from "react";
import ReactDOM from "react-dom";
import Button from '@material-ui/core/Button';

import "index.scss";

let HelloWorld = () => {
return <h1>Hello React!!</h1>
}

let HelloBtn=()=>{
return <Button variant="contained" color="secondary">Hello,MaterialDesign!</Button>
}

ReactDOM.render(
<div><HelloWorld/><HelloBtn/></div>,
document.getElementById("root")
);

產生如下的效果：

image.png

關於更多Material-UI的內容可以參考這裡。

更多關於Material-UI和React的技術可以參考這個文章

關於更多官方Material-Design的設計可以參考這裡。

react-hyperscript

儘管React官方更加支援html和js混用的jsx格式，但是我很討厭它。推薦大家可以結合react-hyperscript來實現完全js的介面編寫。

安裝命令：

npm install react-hyperscript --save-dev

直接在 index.js 中使用：

import React from "react";
import ReactDOM from "react-dom";
import Button from '@material-ui/core/Button';
import h from "react-hyperscript"

import "index.scss";

let HelloWorld = () => {
return h('h1', 'Hello React')
}

let HelloBtn = () => {
return h(Button, {
variant: 'contained',
color: 'primary',
}, 'Hello,MaterialDesign!')
}

ReactDOM.render(
h('div', [
h(HelloWorld),
h(HelloBtn)
]),
document.getElementById("root")
);

這樣的程式碼雖然看起來多了幾行，但更加清楚整齊，而且自動格式化之後也不會出錯。

Aframe

最簡單的接入方法是直接安裝匯入使用：

npm install aframe --save-dev

在 index.js 改為：

import React from "react";
import ReactDOM from "react-dom";
import h from "react-hyperscript"
import 'aframe';

import "index.scss";

let Box=()=>{
return h('a-box',{color:'red',position:'0 0 -4'})
}

ReactDOM.render(
h('a-scene',{background:'color:#CCC'},[
h(Box)
]),
document.getElementById("root")
);

這個方法問題也很多，只能用於組裝場景，而不能檢測場景內物體的事件，所以主要還是得使用aframe自身的程式設計規範。

最終程式碼可以參考Github的專案這裡

關於如何檢測aframe元素的點選事件，稍後我們繼續學習。