HTML+TypeScript使用ES6语法在vsc中的搭建

最新推荐文章于 2024-03-19 19:37:32 发布

YingEntropy

最新推荐文章于 2024-03-19 19:37:32 发布

阅读量399

点赞数

分类专栏： vsc 文章标签： html5 typescript ts js javascript

本文链接：https://blog.csdn.net/ajicom/article/details/117573317

版权

vsc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前情提要

在学习WebGL的过程中，需要在Web环境进行开发，最开始使用js简单进行了测试，开发效率并不高。
因而替换成了ts，主要是因为有代码提示，方便学习和记忆。
因为学习过程中不需要其他的页面，所以没有使用其他前端框架（只有一个index.html）
在搭建这个环境的时候，发现了很多问题，比如es6语法html无法很好的解析。

这里使用的是任务形式去运行项目。

第一步安装TypeScript和browserify

// typescript@x.x.x 可以选择安装不同版本的ts，默认最新
// -g 全局安装
cnpm install typescript -g
// 用于解释ES6(ES6转换为ES5)
cnpm install browserify -g

第二步创建package.json

// 在当前目录下创建出package.json
cnpm init

文件内容大致是这样的：

{
  "name": "webgl_ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {
    "typescript": "^4.3.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC"
}

第三步创建tsconfig.json

// 在当前目录下创建出tsconfig.json
tsc --init

文件内容大致是这样的：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "bin-debug",
    "rootDir": "./src"
  },
  "include": [
    "src/**/*",
    "lib/**/*"
  ],
  "exclude": []
}

第四步创建目录

分别创建出bin-debug、src、lib（可以根据自己需求和习惯随意创建）

第五步安装vsc插件[Debugger for Microsoft Edge]

这里不做过多要求，可以选择其他习惯的浏览器（如：Chrome、火狐等）

在这里插入图片描述

第六步创建launch.json

在.vscode中创建出launch.json
选择Edge调试

大致内容Copy如下：

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "edge调试",
			"type": "edge",
			"request": "launch",
			"trace": true,
			"smartStep": true,
			"file": "${workspaceRoot}/index.html",
			"runtimeArgs": [
				"--allow-file-access-from-files",
				"--allow-file-access-frome-files",
				"--disable-web-security"
			],
			"sourceMaps": true,
			"webRoot": "${workspaceRoot}",
			"userDataDir": "${workspaceRoot}/.vscode/edge",
			"fixedPort": false,
			"sourceMapPathOverrides": {
				"src/*": "${workspaceRoot}/src/*"
			},
			"preLaunchTask": "browserify"
		}
	]
}

注意下preLaunchTask，这里设置调试会话开始前要运行的任务

第七步创建tasks.json

在.vscode中创建出tasks.json

内容大致如下：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc",
            "type": "shell",
            "command": "tsc",
        },
        {
            "label": "browserify",
            "type": "shell",
            "command": "browserify",
            "args": [
                "./bin-debug/App.js",
                "-o",
                "./bin-debug/es5/App_ES5.js"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "dependsOn": [
                "tsc"
            ]
        }
    ]
}

这里配置了两组任务

**第一组任务tsc，任务是编译src下面的ts文件，将编译好的js文件放在bin-debug下面
第二组任务browserify，任务是将bin-debug目录下的js文件解释称es5，方便html读取**；将解释好的文件放到bin-debug/es5下面

第二组任务中使用args，这里面定义了完整的命令

 browserify ./bin-debug/App.js -o ./bin-debug/es5/App_ES5.js

第八步 index.html

简简单单HTML
内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src="./bin-debug/es5/App_ES5.js"></script>
</body>

</html>

第九步创建App.ts

src目录下创建入口目录，叫什么根据自己喜好定义

第十步运行

F5运行项目

在.vscode下面会自动创建出edge 在这里插入图片描述
bin-debug目录下也会根据src目录下的格式创建出相应的js文件，但是会多出一个es5目录，这个目录就是html可以直接读取的es5文件

至此，所有基础框架已经完成~愉快的学习吧

开源万岁！

YingEntropy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+TypeScript使用ES6语法在vsc中的搭建

前情提要在学习WebGL的过程中，需要在Web环境进行开发，最开始使用js简单进行了测试，开发效率并不高。因而替换成了ts，主要是因为有代码提示，方便学习和记忆。因为学习过程中不需要其他的页面，所以没有使用其他前端框架（只有一个index.html）在搭建这个环境的时候，发现了很多问题，比如es6语法html无法很好的解析。这里使用的是任务形式去运行项目。第一步安装TypeScript和browserify// [email protected] 可以选择安装不同版本的ts，默认最新// -
复制链接

扫一扫