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. 1. react 编程实践 俄罗斯方块-需求分析

    1. 需求分析 俄罗斯方块的要素 界面展示 定时刷新 键盘响应 方块模型 游戏规则 俄罗斯方块 比 "电商购物车" 好在哪? 业务比较简单, 人人都了解, 不需要过多前置知识 技术 ...

  2. React Native IOS ---基础环境搭建（前端架构师）

    React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...

  3. 从零开始针对 .NET 应用的 DevOps 运营实践 - 运行环境搭建

    一.Overview 最近的一段时间,在公司里我都在进行基于 Jenkins 和 SonarQube 配合已有的 Gitlab 搭建部门的持续集成环境的工作,虽然之前有使用过 GitHub Actio ...

  4. 1. react 基础 简介 及 环境搭建

    一.简介 由 Facebook 推出 2013 年 开源 的 函数式编程的 使用人数最多的 前端框架 拥有健全的文档与完善的社区 ( 官网 ) react 16 称为 React Fiber ( 底层 ...

  5. 3D游戏编程大师技巧──环境搭建

    刚开微博,想借助这个平台与大家交流,写下自己的学习记录,希望得到大家的批评指正. 好了,进入主题.这段时间对游戏编程很感兴趣,于是在网友的推荐下开始学习<3D游戏编程大师技巧>这本书.今天 ...

  6. jni 入门 android的C编程之旅 --->环境搭建&&helloworld

    需要进行jni的开发有一下几个条件: 1:能初步使用C/C++如果不会,请参读 谭浩强的  C编程语言 2:android应用开发已经基本入门,如果没有,请先行学习 这两个条件基本满足后,我们开始了: ...

  7. React .js框架的环境搭建

    React学习笔记(一)- 环境搭建   最近在学习react相关的知识,刚刚起步,一路遇坑不断.自己做个笔记,方便日后总结,也供相同趣味的小伙伴一起交流探讨. 学习时主要参考官网的教程:https: ...

  8. Forward团队-爬虫豆瓣top250项目-团队编程项目开发环境搭建过程

    本次结对编程和团队项目我都需要用python环境,所以环境的搭建是一样的.(本文部分内容引用自己博客:http://www.cnblogs.com/xingyunqi/p/7527411.html) ...

  9. React.js学习之环境搭建

    1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下: 主流前端开发编辑器 体积较小 ...

随机推荐

  1. HDU - 6006 Engineer Assignment (状压dfs）

    题意:n个工作,m个人完成,每个工作有ci个阶段,一个人只能选择一种工作完成,可以不选,且只能完成该工作中与自身标号相同的工作阶段,问最多能完成几种工作. 分析: 1.如果一个工作中的某个工作阶段没有 ...

  2. (win32)解决虚拟按键被输入法截获(转)

    源博客地址:http://blog.csdn.net/kencaber/article/details/51417871 响应WM_KEYDOWN消息时发现`~快捷键无效,设置断点发现得到的按键消息根 ...

  3. windows下移植别人配置好的python环境

    一般来说,我们在windows下配置python环境的时候可能会比较推荐用anaconda,那么有一个比较方便的anaconda环境移植方法,也就是说,如果我已经在windows上安装好了anacon ...

  4. Python 中使用 ddt 来进行数据驱动，批量执行用例，修改ddt代码

    1. 什么是数据驱动? 使用数据驱动有什么好处? 用例执行是靠数据来驱动的,每条测试用例除了测试数据不一样意外,所有的用例代码都是一样的,为了使用例批量执行,我们会使用数据驱动的思想来批量执行测试用例 ...

  5. 第十二篇视图层之视图函数(views)-三件套

    视图层之视图函数(views) 阅读目录(Content) 视图层之视图函数(views) 一个简单的视图 HttpRequest HttpResponse redirect 函数 对比render与 ...

  6. python 导入数据包的几种方法

    1.直接导入整个数据包:improt 数据包 参考代码: # -*- coding:utf-8 -*- # 导入random数据包 import random # 引用random数据包中的randi ...

  7. 文件的概念、标准IO其一

    1.文件的概念 文件是一种存储在磁盘(掉电不丢失存储设备)上,掉电不丢失的一种存储数据的方式,文件在系统中有以下层次的结构来实现. 系统调用.文件IO.标准IO的关系如下: 2.linux系统的文件分 ...

  8. Day1-T2

    原题目 在小X的认知里,质数是除了本身和1以外,没有其他因数的数. 但由于小 X对质数的热爱超乎寻常,所以小X同样喜欢那些虽然不是质数, 但却是由两个质数相乘得来的数. 于是,我们定义一个数小 X喜欢 ...

  9. Python之日志处理（logging模块）转载

    本人主要做一个知识的归类与记录,如是转载类文章,居首都会备注原链接,尊重原创者,谢谢! 此文转载原链接:https://www.cnblogs.com/yyds/p/6901864.html 本节内容 ...

  10. Community Cloud零基础学习（三）Partner Account

    本篇参考:http://salesforce.vidyard.com/watch/bLE3QNRSej2iasw9vvc6Tk http://salesforce.vidyard.com/watch/ ...