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. 安装 babel 编译工具
npm i babel-cli babel-preset-env babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy babel-plugin-transform-runtime babel-plugin-transform-react-jsx --save
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‘,
},
module: {
// js 文件 用 什么 loader 去载入
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
‘babel-loader‘
]
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: ‘style-loader!css-loader‘
},
{
// css 语法糖
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‘
})
]
}
7. 安装 webpack 包文件
npm i webpack webpack-cli babel-loader style-loader css-loader less-loader svg-inline-loader html-webpack-plugin webpack-dev-server --save-dev
webpack-bundle-analyzer 可以分析 安装的包有多大 等信息
//需要修改 webpack 版本为 3.10.0
// 卸载 webpack
// npm uninstall webpack
// npm i webpack
npm i webpack-bundle-analyzer --save-dev
npm i [email protected] --save-dev
nrm 可以 指定 npm 的 镜像源
npm i nrm -g
9. 添加 package.json 内 添加 webpack 指令
"scripts" : {
"start":"webpack-dev-server --config ./webpack/develop.js --hot --inline",
"build":"webpack --color --config ./webpack/build.js"
}
8. 编写 webpack/develop.js
var path = require(‘path‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports = {
entry: path.resolve(__dirname, ‘../demo/index.js‘),
output: {
path: path.resolve(__dirname, ‘./‘),
filename: ‘index.js‘,
publicPath: ‘/‘
},
devtool: ‘inline-source-map‘,
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
// 引入 游戏 js
import Tetris from ‘./tetris‘
// 绑定app 渲染页面
const game = new Tetris(‘#app‘);
game.setConfig({
// 游戏难度
level:6
});
game.start();