俄罗斯方块的那些事：2 开发环境准备

最新推荐文章于 2022-06-27 20:29:03 发布

weixin_34378922

最新推荐文章于 2022-06-27 20:29:03 发布

阅读量346

点赞数

文章标签： json javascript c/c++ ViewUI

原文链接：https://juejin.im/post/5c44099de51d45517624f6de

版权

搭建一个精简的ts浏览器开发环境

为了开发这个俄罗斯方块游戏，我打算使用typescript，而想在浏览器中运行，调试，我需要有一个开发环境，希望它能够具备如下功能：

时时编译ts文件
打包文件
在浏览器中实时刷新效果

就这么一点功能，我打算直接上gulp,简单配置就行了。

准备工作

全局安装gulp

npm install --global gulp
复制代码

全局安装live-sever

npm install -g live-server
复制代码

创建项目

先要通过 npm init 命令初始化项目。

安装依赖

通过npm install 安装如下依赖。

"browserify": "^16.2.3",
"gulp": "^4.0.0",
"gulp-less": "^4.0.1",
"gulp-typescript": "^5.0.0",
"gulp-util": "^3.0.8",
"tsify": "^4.0.1",
"typescript": "^3.2.2",
"vinyl-source-stream": "^2.0.0",
"watchify": "^3.11.0"
复制代码

整体的目录结构如下

注意的几点如下：

dist:打包之后的目录
 - css/：与src中的less相对应
 - bundle.js  src/ts目录下各个.ts文件生成的js
src: 开发目录
 - less/
 - ts/
 index.html
 gulpfile.js 最重要的配置文件
复制代码

主要文件的内容

1. gulpfile.js

当我们在根目录下面运行gulp，就会运行gulpfile.js文件。主要的要点，我通过注释标注下来。

const gulp = require("gulp");
const browserify =require("browserify")
const source = require("vinyl-source-stream")
const tsify = require("tsify");
const watchify = require("watchify")
const gutil = require("gulp-util")
const less = require('gulp-less')

// 入口文件是src/ts/main.ts。 类似于c语言中的main文件。
const wathchedBrowerify = watchify(browserify({
    basedir:"",
    debug:true,
    entries:["src/ts/main.ts"],
    cache:{},
    packageCache:{}
})).plugin(tsify)

// 创建一个任务，名为less。把src/less下的全部.less转成css
gulp.task('less', function () {
    return gulp.src('src/less/**/*.less')
        .pipe(less()).pipe(gulp.dest('dist/css'));
});

// 创建一个任务，把src下的html文件复制到dist目录下。
gulp.task("copy-html",function(){
    return gulp.src(["src/*.html"]).pipe(gulp.dest("dist"))
});

// 最核心的功能：把ts文件打包成bundle.js，并放在dist目录下
function bundle(){
    console.info("budler.............")
    return wathchedBrowerify.bundle().pipe(source('bundle.js'))
    .pipe(gulp.dest("dist"));
}

// 默认任务。直接运行 gulp命令，就会运行这个任务。 它先做 copy-html任务,再做less任务，然后是bundle，
gulp.task("default",gulp.series("copy-html","less",bundle));

// 监听 文件的变化，如果less和index有变化，运行less和copy-html任务
gulp.watch(['src/less/*.less','src/index.html'], gulp.series('less','copy-html'));

// 如果ts有变化，重新bundle
wathchedBrowerify.on("update",bundle);
wathchedBrowerify.on("log",gutil.log)

复制代码

2.src/ts/main.ts

在src目录先建立ts文件夹，并创建main.ts文件。内容如下：

let canvas: HTMLCanvasElement = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
console.dir(canvas)
复制代码

3.src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="main">
      <h1>俄罗斯方块</h1>
      <canvas id="myCanvas" width="400" height="400"></canvas>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
复制代码

注意，这里的资源文件.css文件，.js文件，所使用的目录路径都是假设现在是在dist目录下。因为这个index.html文件最后是要拷贝到dist目录下的，所以，它引入的是bundle.js和./css/index.css 这两个文件，现在你在src目录下看不到这两个文件，等接下来运行gulp命令时，他们才会被创建出来。

4.src/less/index.less

这个文件简单给html加一点点样式。

body{
    background-color:#fff;
    h1{
        color:#000;
        text-align: center;
    }
    #myCanvas{
        margin: 50px auto;
        display: block;
        background-color: #000;
    }
    
}
复制代码

5.tsconfig.json

ts的配置文件。

{
    "files": [
        "src/ts/*.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}
复制代码

运行

你会在dist目录下看到新生成的bundle.js和index.html,index.css文件。

预览index.html文件的效果。两个方法：

进入dist目录，双击打开index.html文件。
进入dist目录，在cmd中通过运行 live-sever 命令，在本地起一个服务器。根据提示访问相应的地址（大概率是：localhost:8080）。

为了方便后面工作，我们在package.json配置好命令。

 "scripts": {
    "gulp": "gulp", 
    "start": "cd dist && live-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
复制代码

end

你可以通过安装 cli-web 命令行工具来快速搭建项目框架。

npm install -g cli-web
复制代码

安装成功之后。通过 cli-web creat 命令来创建项目。

好了。下一篇我们就可以正式开动写代码了。

转载于:https://juejin.im/post/5c44099de51d45517624f6de

weixin_34378922

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫