# 纯前端ts demo

**Repository Path**: RedBeast/pure-front-end-ts-demo

## Basic Information

- **Project Name**: 纯前端ts demo
- **Description**: 需要写个使用xlsx进行json转excel的小工具，就想用typescript写一下纯前端无框架。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-09
- **Last Updated**: 2021-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 纯前端 Typescript Demo

## 起因
之所以写一个js脚本就能搞定的事情要用 typescript，还是因为ts的类型非常方便，不需要写那么多jsdoc注释（我在之前的React框架前端项目里写了大量的类型注释，TMD烦死）。

这个json是某个API的响应返回体，结构工整，又有现成的vscode插件直接从json生成ts接口。

## 历程

### 第一天：屡屡碰壁。

写 typescript，当然要装 tsc 然后编译啦！现在浏览器大都支持ES6，当然直接编译成 es6 啦！

按照教程（永远记不住步骤）安装好 tsc，配置好根目录，目标，下载了xlsx.full.min.js。

直接在HTML中引入bootstrap、xlsx的js文件，还有编译好的index.js。

* 问题1：无论在 tsconfig 中设置哪种模块机制（其实只能是 ES6模块），都会打包成模块，浏览器会报错，commonJS 更是不可能（没有浏览器支持）。
    
    解决方法：在 `<script>` 上添加 `type="module"`，就可以引入 ES6 模块的 index.js 了。

* 问题2：typescript 要求 XLSX 对象必须存在，才能被使用。
    
    解决方法：那我 `import * as XLSX from 'XLSX的相对路径'` 就好了啊？
    
    结果：在浏览器中运行时，始终无法获取 XLSX对象的属性，只有一个 version 属性还是 undefined。但是在控制台却可以访问到 XLSX 对象，说明相对路径import有效，只是此js文件缺少 typing 类型说明，typescript 无法识别。

    解决方法2：那我使用npm包，里面有 .d.ts 文件，肯定能识别吧？
    `import * as XLSX from 'xlsx'`
    需要把tsconfig中的 moduleResolution 设置为 "node"，然后就可以在ts中快乐地调用XLSX中的方法了。
    
    结果：浏览器一看 index.js，'xlsx' 不是合法的import方式（ES6规范是要求相对路径的），直接报错。

    解决方法3：按照网上的方法，使用 `/// <reference path="../node_modules/xlsx/types/index.d.ts" />` 来知名类型文件，然后 xlsx 还是从相对路径引入。这样 typescript 认识 XLSX了，写ts没问题了。

    结果：tsc编译后的 index.js 中原原本本地保留了这句话，然后浏览器找不到该路径，仍然报错。

    该教程还说明了可使用 require.js 引入所有js文件，第二天再看看吧。

### 第二天：早知道，还是webpack。

webpack 编译打包一气呵成。

第一步：安装webpack和webpack-cli

第二步：配置进入点（就是tsc编译出的es6格式index.js），输出

第三步：在 index.html 中只需引入这个打包出的js文件（很大的，毕竟包含了整个xlsx.full.min.js）

~~然而很快发现 html 中引入的其他 css 和 js 都报错了（原来是目录名被我改了）~~，我们先看怎么省去手动 tsc 的步骤。

安装 ts-loader，配置 webpack.config.js，不再需要 rimraf ./build && tsc，换成 webpack --progress，顺便把 webpack-dev-server 也装上，省去 liveserver。

可以了，完全不需要啥别的了。

### 当前问题：

webpack-dev-server 无法自动更新静态的 index.html。