软件技术-Web-React-MD-Aframe项目快速搭建

欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】
【汇总】2019年4月专题

这篇文章介绍如何使用VSCode快速初始化一个基于React.js的Web项目，React.js是当前最主流的Web开发框架之一,另一个是Vue.js。

前提工作

首先我们需要安装(或确认已安装)：

VSCode
Git
Nodejs

然后我们需要：

创建项目文件夹（GoCraft）；
初始化本地Git仓库git init；
在Github网站创建对应的无初始化的仓库(GoCraft)；
设置Github远程仓库git remote add origin https://用户名地址(非邮箱):密码@github...；
如果设置错了使用git remote remove origin删除再来
创建cli文件夹，进入并初始化npm init
创建.gitignore文件忽略掉cli/node_modules文件夹；

以上步骤可以参考这个文章的前半段内容完成。

创建index文件

我们创建两个文件cli/dist/index.html和``cli/src/index.js`内容分别如下：



  
    
    
    
    React-MD-Aframe
    
  
  
    Hello World!!

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

安装和配置Webpack

使用下面的命令安装(管理员或sudo)：
npm install --save-dev webpack webpack-cli webpack-dev-server

如果遇到问题可以考虑尝试使用淘宝npm镜像的cnpm命令，具体方法参见官网http://npm.taobao.org/，以下相同。

可能会要几分钟，也可能会出现一些错误，但只要最后正常完成即可：

为我们的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快捷键。建议从菜单新建单独的终端命令行终端来执行别的命令，而不必每次都停止它。

如果遇到IP地址端口被占用（由于上一次没有正常关闭导致），就需要结束掉之前的进程。Mac下显示Error: listen EADDRINUSE: address already in use,解决办法是lsof -i tcp:9000列出所有占用9000端口进程，kill pid结束掉指定pid的进程，多试几次，可以使用fg命令查看，直到lsof -i tcp:9000为空然后再npm run dev重启。

打开页面的控制台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，并把里面的删除，因为我们的插件会自动补充这个内容。

重启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 Hello React!
}

ReactDOM.render(
  ,
  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 Hello React!!
}

let HelloBtn=()=>{
  return 
}

ReactDOM.render(
  ,
  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元素的点击事件，稍后我们继续学习。

欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】

每个人的智能新时代

如果您发现文章错误，请不吝留言指正；
如果您觉得有用，请点喜欢；
如果您觉得很有用，欢迎转载~

END