Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jowayyoung/trample

A Web/Node General Utils Library
https://github.com/jowayyoung/trample

rollup tool util

Last synced: 13 days ago
JSON representation

A Web/Node General Utils Library

Host: GitHub
URL: https://github.com/jowayyoung/trample
Owner: JowayYoung
License: mit
Created: 2018-07-11T12:57:34.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-09-27T06:40:04.000Z (4 months ago)
Last Synced: 2025-01-10T18:52:35.469Z (26 days ago)
Topics: rollup, tool, util
Language: JavaScript
Homepage: https://yangzw.vip/source?id=trample
Size: 436 KB
Stars: 36
Watchers: 1
Forks: 11
Open Issues: 2
Metadata Files:
- Readme: readme.md
- License: license

Awesome Lists containing this project

README

        # Trample 

[![author](https://img.shields.io/badge/author-JowayYoung-f66.svg)](https://github.com/JowayYoung/trample)

[![version](https://img.shields.io/badge/version-0.4.0-f66.svg)](https://github.com/JowayYoung/trample)

[![web](https://img.shields.io/badge/web-%3E%3D%2095%25-3c9.svg)](https://github.com/JowayYoung/trample)

[![node](https://img.shields.io/badge/node-%3E%3D%208.0.0-3c9.svg)](https://github.com/JowayYoung/trample)

[![test](https://img.shields.io/badge/test-passing-f90.svg)](https://github.com/JowayYoung/trample)

[![build](https://img.shields.io/badge/build-passing-f90.svg)](https://github.com/JowayYoung/trample)

[![coverage](https://img.shields.io/badge/coverage-90%25-09f.svg)](https://github.com/JowayYoung/trample)

[![license](https://img.shields.io/badge/license-MIT-09f.svg)](https://github.com/JowayYoung/trample)

### 前言

**工欲善其事，必先利其器**。应用在项目开发上就是：`做好一个项目，前期的工作准备非常重要`。项目开发的前期准备无非都是`合理规划项目结构`、`按需编写构建代码`、`批量创建入口文件`、`复制粘贴工具函数`等。

在此先推荐笔者写的一个**React/Vue应用自动化构建脚手架**[bruce-cli](https://github.com/JowayYoung/bruce-cli)，其零配置开箱即用的优点非常适合入门级、初中级、快速开发项目的前端同学使用，还可通过创建`brucerc.js`文件来覆盖其默认配置，只需专注业务代码的编写无需关注构建代码的编写，让项目结构更简洁。

通过`bruce-cli`能把常规的前期准备都解决了，但我们经常会复制粘贴一些之前项目常用的工具函数过来新项目上，新开其他项目时又会重新执行这些操作。

项目开发过程中时常会重复使用一些工具函数，例如`浏览器类型`、`格式时间差`、`URL参数反序列化`、`过滤XSS`等，为了避免项目开发时重复的复制粘贴操作带来不必要的麻烦，笔者将平时常用的一些工具函数按功能分类和统一封装，并发布到`npm`上。每次项目开发时直接安装，提高开发效率，将时间用在正确的事情上。

### 安装

- 使用`npm`安装：`npm i trample`

- 使用`yarn`安装：`yarn add trample`

### 使用

`trample`根据**Web**和**Node**两种JS运行环境划分代码，生成两种`bundle.js`。每种文件在不同JS运行环境下运行，必须根据JS运行环境引用文件，否则会报错。

##### 区别

模块|工具库|运行环境|对应文件|ESM的对应文件

:-:|:-:|:-:|-|-

**Web**|Web函数工具库|浏览器|`web.js`|`web.esm.js`

**Node**|Node函数工具库|服务器|`node.js`|`node.esm.js`

##### 兼容

- **Web**：`>= 95%`

- **Node**：`>= 8.0.0`

##### 引用

`trample`使用`rollup`打包，因此可使用`IIFE`、`AMD`、`CJS`、`UMD`和`ESM`五种方式引用。但推荐使用`IIFE`、`CJS`、`ESM`三种引用方式。工具库的代码使用`ESM`规范开发，使用`export {}`导出。

> IIFE引用方式

适用于`Web`，最简单最方便的引用方式没有之一。把`node_modules/trample/dist/web.umd.js`复制出来，放到新建的`js/trample`文件夹下，通过HTML的``直接引用。

```html

<body>

    <script src="js/trample/web.umd.js">

    

        console.log(window.trample.TypeOf("trample"));

        console.log(window.trample.BrowserType());