目的
使用 TypeScript 来对原生的window.localstorage 进一步的封装,新增多种api接口,来更好的使用,增强了语义化。
开始
我使用TypeScript-library-starter来帮助我们快速初始化一个 TypeScript 项目,它是一个开源的 TypeScript 开发基础库的脚手架工具,可登录官网了解详细使用。
使用方式
git clone https://github.com/alexjoverm/typescript-library-starter.git ts-storage
cd ts-storage
npm install
按照提示,安装完毕即可,但由于该项目长期没更新,里面的插件太旧了,也可结合项目的实际情况更新下插件即可。
目录结构
安装完毕之后,生成以下项目结构
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── code-of-conduct.md
├── node_modules
├── package-lock.json
├── package.json
├── rollup.config.ts // rollup 配置文件
├── examples // 运行测试页面
├── src // 源码目录
├── test // 测试目录
├── tools
├── tsconfig.json // TypeScript 编译配置文件
└── tslint.json // TypeScript lint 文件
在 package.json里面,TypeScript library starter中帮我们配置了一些 npm scripts
npm run lint: 使用 TSLint 工具检查 src 和 test 目录下 TypeScript 代码的可读性、可维护性和功能性错误;npm test: 运行 jest 工具跑单元测试;npm run build: 运行 rollup 编译打包 TypeScript 代码 ;
一切准备就绪,开始代码编写。
编写入口文件
在src 目录下的文件,先创建一个 index.ts 文件,作为整个库的入口文件,然后我们先定义一个 BetterStorage 方法,并把它导出,如下:
import BetterStorage from "./storage";
export default BetterStorage
由于这是小的项目,所以我将主代码放在storage.ts里面,通过命名 BetterStorage 类名,在类里面实现各类方法,最后import出去,如下:
class BetterStorage {
key: string
readonly storage: any // 只读属性,外部不能修改
constructor(key?: string) {
// 设置全局的key
this.key = key ? key : DEFAULT_KEY
this.storage = window.localStorage
}
/*
各类方法
*/
/*
获取
@param: key 可选
@return: 获取值
*/
get(key?: string): string {
let _key = key ? key : this.key // 优先使用自己存入的key值
return this.storage.getItem(_key)
}
}
export default BetterStorage
剩下的编写,我这里省去了,其实都是很简单的js代码编写,在这里没必要讲。
运行demo
这里我通过构建工具 webpack 的模块热替换 webpack-dev-server 来运行我的demo。
依赖安装
先安装一下需要的依赖包
"webpack": "^5.38.1",
"webpack-dev-server": "^3.11.0",
"ts-loader": "^9.2.3",
"tslint-loader": "^3.5.4",
"html-webpack-plugin": "^5.3.1",
其中,webpack 是打包构建工具,使用 webpack 插件webpack-dev-server 来搭建实时重新加载的开发服务器,HtmlWebpackPlugin来自动生成一个 HTML5 文件,ts-loader 和 tslint-loader 是 webpack 需要的 TypeScript 相关 loader。
编写 webpack 配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const devConfig = {
mode: "development",
entry: {
app: './examples/app.ts',
},
devtool: "eval-cheap-module-source-map",
plugins: [
new HtmlWebpackPlugin({
template: "./examples/index.html",
title: "ts-storage"
})
],
resolve: {
extensions: ['.ts', '.js', '.json']
},
module: {
rules: [
{
test: /\.ts$/,
enforce: 'pre',
use: [
{
loader: 'tslint-loader',
}
]
},
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true
}
}
]
}
]
},
devServer: {
contentBase: './dist',
port: 8900,
compress: true,
hot: true
},
}
module.exports = devConfig
编写测试文件
由于我的项目是使用 typescript-library-starter 初始化的,已经内置了 Jest 的安装,但是安装的版本却不是最新的,我们可以对 package.json 中的相关依赖版本做修改,重新安装。
{
"jest": "^27.0.4",
"jest-config": "^27.0.4",
"ts-jest": "^27.0.3",
}
开始编写测试文件
这里展示部分的测试文件
import BetterStorage from '../src'
describe('set', () => {
const bs = new BetterStorage('name')
test('set storage', () =>{
const val = 'usa'
expect(bs.set(val))
})
test('set storage', () =>{
expect(bs.set).toThrow()
})
})
运行测试
npm test
测试结果
成功完成了测试,让测试覆盖率达到目标 100%。
代码打包部署
打包
这里我是用 rollup 来打包我的项目,在打包前我要在 rollup.config.ts 中稍微修改一下配置项即可
const libraryName = 'ts-better-storage' // package.json 的名字保持一致
export default {
input: `src/index.ts`, // 入口文件
/*
省略代码
*/
}
修改 package.json
由于我们已经在 rollup.config.ts 中修改了 libraryName 为 ts-better-storage, 那么在 package.json 文件中你需要做相关的修改:
"main": "dist/ts-better-storage.umd.js",
"module": "dist/ts-better-storage.es5.js",
"typings": "dist/types/index.d.ts",
一切准备就绪,开始运行打包
npm run build
部署
打包完毕之后,就可以开始在 npm 上部署我的代码了。如果你还没有 npm 账号,那么需要先去官网注册。注册完成后,可以去终端执行 npm login 登录,如果是首次注册,必须是要验证完毕你的邮箱之后再进行登陆,这个步骤非常重要,决定你最终能否发布成功。
在发布之前,你还要先验证下自己的包命名是否被占用,可以运行以下代码进行查验
npm view te-better-storage
假如返回json格式的包信息,就证明这个命名已经被占用;假如返回的是 404 ,就证明此命名没有被占用,就可以使用了。
运行:
npm publish
完成代码部署,你就可以在npm官网上看到自己发布的包。
引用
然后就可以在你的项目上使用自己的包了
npm install ts-better-storage -D
代码仓
最后奉献我的代码仓,别忘了你的小星星。ts-better-storage