2. react 编程实践 俄罗斯方块-环境搭建
1. 创建 demo 目录
mkdir demo
2. 初始化应用
npm init
工程信息
package name : tetris-class-demo
version:
description: tetris game
entry point:
test command:
git repository:
keywords:tetris, game
author: zonehoo
license: MIT
3.在 demo 下 创建 src , webpack 文件夹 .babelrc (编译代码配置) index.html 文件 (入口页面)
mkdir src webpack
touch .babelrc index.html
webpack 文件夹下 创建 build.js (webpack 打包用) develop.js (调试用)
touch webpack/build.js webpack/develop.js
src 文件夹下 创建 index.js(js 入口文件)
touch src/index.js
4. 编写 .babelrc
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions","ie >= 10"]
},
"debug": false
}
]
],
"plugins": [
"transform-class-properties",
"transform-decorators-legacy",
[
"transform-react-jsx",
{
"pragma": "React.createElement"
}
],
[
"transform-runtime",
{
"helpers": true,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}
]
]
}
5. 安装 webpack 和 babel 编译工具 并 添加 webpack 指令
编写 package.json
#package.json
{
"name": "tetris-class-demo",
"version": "1.0.0",
"description": "tetris game",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack/develop.js --hot --inline",
"build": "webpack --color --config ./webpack/build.js"
},
"keywords": [
"tetris",
"game"
],
"author": "zonehoo",
"license": "MIT",
"dependencies": {
"shortid": "^2.2.12",
"webpack-require-http": "^0.4.3"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.7.1",
"less-loader": "^4.1.0",
"style-loader": "^0.21.0",
"svg-inline-loader": "^0.8.0",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^2.11.2"
}
}
安装拓展包
npm install
6. 编写 webpack/build.js 文件
var path = require('path')
var webpack = require('webpack')
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
var UglifyJSPlugin = webpack.optimize.UglifyJsPlugin
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'),
output: {
path: path.resolve(__dirname, '../.package'),
filename: 'bundle.min.js'
},
externals: {
react: 'React',
'react-dom': 'ReactDOM'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
]
},
plugins: [
new UglifyJSPlugin({
mangle: {
// Skip mangling these
except: ['exports', 'require']
},
sourceMap: true
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'BundleReportRelease.html',
logLevel: 'info'
})
]
}
8. 编写 webpack/develop.js
var path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'),
output: {
path: path.resolve(__dirname, './'),
filename: 'index.js',
publicPath: '/'
},
devtool: 'inline-source-map',
externals: {
react: 'React',
'react-dom': 'ReactDOM'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html'
})
],
devServer: {
hot: true,
port: 9000
}
}
9 写首页 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id='app'></div>
</body>
</html>
10. 引入 MVC
在 src 下 创建 view.js controller.js model.js
touch src/view.js src/controller.js src/model.js
创建 游戏 运行 js tetris.js
touch src/tetris.js
11. 编写 index.js
alert(1);
12. 使用 npm start 并访问 127.0.0.1:9000 弹出1即可
npm start
2. react 编程实践 俄罗斯方块-环境搭建的更多相关文章
- 1. react 编程实践 俄罗斯方块-需求分析
1. 需求分析 俄罗斯方块的要素 界面展示 定时刷新 键盘响应 方块模型 游戏规则 俄罗斯方块 比 "电商购物车" 好在哪? 业务比较简单, 人人都了解, 不需要过多前置知识 技术 ...
- React Native IOS ---基础环境搭建（前端架构师）
React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...
- 从零开始针对 .NET 应用的 DevOps 运营实践 - 运行环境搭建
一.Overview 最近的一段时间,在公司里我都在进行基于 Jenkins 和 SonarQube 配合已有的 Gitlab 搭建部门的持续集成环境的工作,虽然之前有使用过 GitHub Actio ...
- 1. react 基础 简介 及 环境搭建
一.简介 由 Facebook 推出 2013 年 开源 的 函数式编程的 使用人数最多的 前端框架 拥有健全的文档与完善的社区 ( 官网 ) react 16 称为 React Fiber ( 底层 ...
- 3D游戏编程大师技巧──环境搭建
刚开微博,想借助这个平台与大家交流,写下自己的学习记录,希望得到大家的批评指正. 好了,进入主题.这段时间对游戏编程很感兴趣,于是在网友的推荐下开始学习<3D游戏编程大师技巧>这本书.今天 ...
- jni 入门 android的C编程之旅 --->环境搭建&&helloworld
需要进行jni的开发有一下几个条件: 1:能初步使用C/C++如果不会,请参读 谭浩强的 C编程语言 2:android应用开发已经基本入门,如果没有,请先行学习 这两个条件基本满足后,我们开始了: ...
- React .js框架的环境搭建
React学习笔记(一)- 环境搭建 最近在学习react相关的知识,刚刚起步,一路遇坑不断.自己做个笔记,方便日后总结,也供相同趣味的小伙伴一起交流探讨. 学习时主要参考官网的教程:https: ...
- Forward团队-爬虫豆瓣top250项目-团队编程项目开发环境搭建过程
本次结对编程和团队项目我都需要用python环境,所以环境的搭建是一样的.(本文部分内容引用自己博客:http://www.cnblogs.com/xingyunqi/p/7527411.html) ...
- React.js学习之环境搭建
1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下: 主流前端开发编辑器 体积较小 ...
随机推荐
- Gauss列主消元
问题:1.列主消元为什么精度高? 2.fabs函数精确度 #include<iostream> #include<cstdio> #include<cstring> ...
- 056-for循环中continue的使用
<?php ; $i <= ; $i++) { //for循环输出数值 == ) //判断变量是否为3的整数倍 { continue;//跳过本次循环剩余语句 } echo "$ ...
- Spring 框架介绍
Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Control – I ...
- junit基础学习之-引用spring容器的测试（7）
context 自动注入的文章链接:http://www.360doc.com/content/11/0815/09/2371584_140471325.shtml
- 2.2 学习总结 之 servlet 的两次抽取
说在前面 昨天 完成了文件上出的学习和实践 今天 学习servlet的两次抽取,以加快编写工程的速度 一.servlet 抽取的原因: 刚刚学习使用servlet写后台,往往只使用一个servlet来 ...
- CodeForces - 748D Santa Claus and a Palindrome (贪心+构造)
题意:给定k个长度为n的字符串,每个字符串有一个魅力值ai,在k个字符串中选取字符串组成回文串,使得组成的回文串魅力值最大. 分析: 1.若某字符串不是回文串a,但有与之对称的串b,将串a和串b所有的 ...
- choice接口、同花顺使用
一 choice接口使用 1.choice软件-->量化-->下载中心,下载python接口文件 EMQuantAPI_Python 2.要先绑定手机号,绑定后账户权限不够,暂时放弃. 二 ...
- linux 下shell 编写脚本
linux 下shell 编写脚本: 1.程序结构练习:编写一个脚本,给定一个正整数,计算出这个数所有位的数字之和. 例如:程序给定输入123,那么应该返回1+2+3=6. 2.程序结构练习:编写一个 ...
- LeetCode随想------Single Number-----关于异或的性质
异或满足交换律,结合律 任何数X^X=0,X^0=X 自反性 A XOR B XOR B = A xor 0 = A 设有A,B两个变量,存储的值分别为a,b,则以下三行表达式将互换他们的值 表达 ...
- 基础nginx配置文件
nginx的配置文件很长,如果开始就看全部的话会懵逼,以下以最简单的配置文件来学习. 目标:定义一个虚拟主机127.0.0.1 端口是8080 [root@localhost conf]# cat ...