贪吃蛇练习

使用TypeScript + Webpack + Less实现贪吃蛇的例子；

项目地址

代码地址

项目依赖

TypeScript：

  • typescript；
  • ts-loader；

Webpack：

  • webpack；
  • webpack-cli；
  • webpack-dev-server；
  • html-webpack-plugin；
  • clean-webpack-plugin；

Babel：

  • core-js；
  • babel-loader；
  • @babel/core；
  • @babel/preset-env；

Less & CSS资源：

  • style-loader；
  • css-loader；
  • less；
  • less-loader；
  • postcss；
  • postcss-loader；
  • postcss-preset-env；

项目使用

编译运行

在确保已经正确安装node和npm的前提下：

分别执行下面的命令安装依赖并编译项目：

# 安装依赖
npm i
# 编译打包
npm run build

编译完成后，使用浏览器打开dist目录下的index.html；

继续开发

使用npm run start进入开发模式；

默认使用Chrome浏览器打开，可以修改package.json中的值：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  }
}

可能遇到的问题

  • node 安装版本太高，报错error:03000086:digital envelope routines::initialization error

  • 解决方法：在命令行修改环境变量： 
      $env:NODE_OPTIONS="--openssl-legacy-provider"

    然后执行 npm run start

  • 端口被占用，修改默认端口
  • 解决方法：再webpack.config.js中添加配置 
    // 设置自定义端口
devServer: {
  historyApiFallback: true,
  contentBase: './',
  port: 9091 // <--- Add this line and choose your own port number
}

    其他

视频讲解：