之前用ts写了一两个小游戏，今天就写一个webpack ts环境搭建
安装node
【下载地址】http://nodejs.cn/download/
node的安装就不在这里讲了。
创建目录
创建webpack-ts文件夹
进入该目录 cd webpack-ts
运行 npm init
生成package.json文件
安装所需要的依赖
"devDependencies": {
"autoprefixer": "^6.6.0", // css 自动根据浏览器加前缀
"babel-preset-env": "^1.7.0", // js 转换的 其实用不着
"css-loader": "^0.27.0", // css 加载器
"file-loader": "^2.0.0", // 文件 加载器
"html-webpack-plugin": "^4.0.0-alpha.2", // html插件
"postcss-loader": "^3.0.0", // 和 css-loader 一起用的
"rimraf": "^2.5.4", // 删除 打包文件夹的
"style-loader": "^0.23.0", // 样式加载
"ts-loader": "^5.3.3", // 重点 ts加载
"tslint": "^5.12.1", // ts代码检查
"tslint-loader": "^3.5.4",
"typescript": "^3.2.4",
"uglifyjs-webpack-plugin": "^1.3.0", // 压缩代码
"url-loader": "^0.5.8",
"webpack": "^4.19.0", // webpack 打包工具
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8" // 本地启动server
}
添加启动打包命令
"scripts": {
"dev": "webpack-dev-server --inline --hot --env.dev --mode development",
"build": "rimraf dist && webpack -p --progress --hide-modules --mode production"
},
创建webpack.config.js
const resolve = require('path').resolve;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const url = require('url');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const publicPath = '';
module.exports = (options = {}) => ({
entry: {
index: './src/main.ts'
},
output: {
path: resolve(__dirname, 'dist'),
filename: options.dev
? 'static/js/[name].js'
: 'static/js/[name].js?[chunkhash]',
chunkFilename: 'static/js/[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
module: {
rules: [
{
test: /\.tsx?$/,
use: ['ts-loader', 'tslint-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
use: ['url-loader?limit=8192&name=static/images/[hash:8].[name].[ext]']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
favicon: 'src/favicon.ico'
})
],
optimization: {
splitChunks: {
chunks: 'all'
},
minimizer: [
new UglifyJsPlugin({
/* your config */
uglifyOptions: {
compress: true,
ecma: 6,
output: {
comments: false
},
compress: {
dead_code: true,
drop_console: true
}
},
sourceMap: false
})
]
},
resolve: {
alias: {
'~': resolve(__dirname, 'src'),
'@': resolve('src')
},
extensions: ['.js', '.json', '.css', '*', '.ts', '.tsx']
},
devServer: {
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
historyApiFallback: {
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
}
},
devtool: options.dev ? '#eval-source-map' : '#source-map'
});
创建tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"lib": ["es6", "dom"],
"outDir": "./dist",
"allowJs": true,
"target": "es6",
"sourceMap": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"jsx": "react"
},
"include": ["./src/**/*", "./src/**.d.ts"],
"typeRoots": ["node_modules/@types"]
}
相关配置文档 http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
创建tslint.json
{
"defaultSeverity": "warning",
"extends": ["tslint:recommended"],
"linterOptions": {
"exclude": ["node_modules/**"]
},
"rules": {
"quotemark": [true, "single"],
"member-access": [false],
"no-shadowed-variable": false,
"indent": [true, "spaces", 2],
"interface-name": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-consecutive-blank-lines": false,
"max-classes-per-file": false,
"arrow-parens": false,
"no-empty": false,
"no-console": false,
"class-name": false,
"trailing-comma": "never"
}
}
进入src目录，在index.html中添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>game</title> </head> <body> <h1>TS-GAME</h1> <main id="app"></main> </body> </html>
创建main.ts入口文件
在src中创建game文件夹
讲之前文章中的 flappy-bird.ts 文件放入game目录
在main.ts中编写
import game from './game/flappy-bird'; game.run();
根目录下启动命令 npm run dev,效果如下
结束语
这样简单的一个ts开发环境就搭好了，我主要用ts 和原生写法 写一些小游戏，本人也是初学者，有时候写游戏的思路不一定很好很对，用于分享和学习。谢谢~
Github地址
https://github.com/Reborn233/ts-game