# JustMicrobundle

**Repository Path**: ahviplc/JustMicrobundle

## Basic Information

- **Project Name**: JustMicrobundle
- **Description**: JustMicrobundle, Microbundle 打包小demo.❤ JavaScript Tools For U (You) ❤.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/ahviplc/JustMicrobundle
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-08
- **Last Updated**: 2024-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: demo, JavaScript, tools, Microbundle

## README

<h1 align="center">Welcome to JustMicrobundle 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
  <a href="#" target="_blank">
    <img alt="License: ISC" src="https://img.shields.io/badge/License-ISC-yellow.svg" />
  </a>
</p>

> JustMicrobundle, Microbundle 打包小demo.❤ JavaScript Tools For U (You) ❤.

### 🏠 [Homepage-gitee](https://gitee.com/ahviplc/JustMicrobundle)

### 🏠 [Homepage-github](https://github.com/ahviplc/JustMicrobundle)

## Install

`安装依赖`

```markdown
npm i -D microbundle
或
yarn add -D microbundle
```

`jest | rimraf`

```markdown
npm i -D jest rimraf
或
yarn add -D jest rimraf
yarn add --dev jest rimraf
```

`lodash`

```markdown
npm i lodash
或
yarn add lodash
```

`git clone之后安装依赖`

```sh
npm i
npm install
或者
yarn
yarn install
```

## Usage

`打包 JustMicrobundle`

```sh
npm run build-all-JustMicrobundle
或者
yarn build-all-JustMicrobundle
```

## Links

```markdown
使用 microbundle 对此项目代码(原来用的 webpack) 再打包吧.
JustMicrobundle: ❤JustMicrobundle > JavaScript Tools For U (You) ❤.
https://gitee.com/ahviplc/JustMicrobundle

cmd-man - npm
https://www.npmjs.com/package/cmd-man

microbundle - npm
https://www.npmjs.com/package/microbundle

GitHub - developit/microbundle: 📦 Zero-configuration bundler for tiny modules.
https://github.com/developit/microbundle

[Preview] \README.md - developit/microbundle - GitHub1s
https://github1s.com/developit/microbundle

[译] 使用 microbundle 打包 TypeScript 组件库_tonylua的博客-CSDN博客
https://blog.csdn.net/tonylua/article/details/107805066

Jest 中文文档 | Jest 中文网 · 🃏 Jest - 令人愉快的 JavaScript 测试框架
https://www.jestjs.cn/

Jest · 🃏 Delightful JavaScript Testing
https://jestjs.io/

GitHub - facebook/jest: Delightful JavaScript Testing.
https://github.com/facebook/jest

GitHub - robinvdvleuten/vuex-persistedstate: 💾 Persist and rehydrate your Vuex state between page reloads.
https://github.com/robinvdvleuten/vuex-persistedstate

学到了很多库 | rimraf 等.
vuex-persistedstate/package.json at master · robinvdvleuten/vuex-persistedstate · GitHub
https://github.com/robinvdvleuten/vuex-persistedstate/blob/master/package.json

GitHub - isaacs/rimraf: A `rm -rf` util for nodejs
https://github.com/isaacs/rimraf

GitHub - lukeed/sade: Smooth (CLI) Operator 🎶
https://github.com/lukeed/sade

GitHub - sindresorhus/gzip-size: Get the gzipped size of a string or buffer
https://github.com/sindresorhus/gzip-size

git 分支查看与切换 - 路过sayhi - 博客园
https://www.cnblogs.com/vae860514/p/11009787.html

GitHub - jest-community/jest-extended: Additional Jest matchers 🃏💪
https://github.com/jest-community/jest-extended

前端测试框架Jest系列教程  如何使用 -- Expect（验证）
https://blog.csdn.net/sinat_17775997/article/details/103603898

httpbin.org
https://www.httpbin.org/

GitHub - postmanlabs/httpbin: HTTP Request & Response Service, written in Python + Flask.
https://github.com/postmanlabs/httpbin

Lodash 简介 | Lodash 中文文档 | Lodash 中文网
https://www.lodashjs.com/

Lodash
https://lodash.com/

GitHub - lodash/lodash: A modern JavaScript utility library delivering modularity, performance, & extras.
https://github.com/lodash/lodash
```

## Notes

### 1. 随记

`主分支 master` => `JustMicrobundle, Microbundle 打包小demo.❤ JavaScript Tools For U (You) ❤.`

`分支 JustFoo`

```markdown
分支 JustFoo 就只是包含 hello world 示例 foo.js 需要此借鉴的 请移步 JustFoo 分支.
使用 切换分支 命令:
git checkout JustFoo
即可切换分支 切换到 JustFoo 分支.
查看所有分支:
git branch -a
查看所有分支：
git branch
```

### 2. 注意点

`以下操作的package.json`

```json
{
  "name": "JustMicrobundle",
  "version": "1.0.0",
  "description": "JustMicrobundle, Microbundle 打包小demo.",
  "type": "module",
  "scripts": {
    "build": "rimraf dist && microbundle",
    "build-all": "rimraf dist && microbundle --external all --name JustMicrobundle",
    "dev": "npx microbundle watch",
    "jest": "jest"
  },
  "keywords": [
    "Microbundle",
    "demo"
  ],
  "author": "LC ahlc@sina.cn",
  "homepage": "https://gitee.com/ahviplc/JustMicrobundle",
  "license": "ISC",
  "devDependencies": {
    "jest": "^27.0.6",
    "microbundle": "^0.13.3",
    "rimraf": "^3.0.2"
  },
  "bin": "",
  "source": "src/foo.js",
  "exports": "./dist/foo.modern.js",
  "main": "./dist/foo.cjs",
  "module": "./dist/foo.module.js",
  "unpkg": "./dist/foo.umd.js",
  "types": "./dist/foo.d.ts",
  "files": [
    "src",
    "README.md",
    "package.json"
  ],
  "dependencies": {}
}
```

`src/foo.js 如果是下面的写法 包含 default 使用 export default`

```js
export default function foo() {
    const message = 'I am foo';
    console.log(message)
    return message
}
```

`打包之后 测试就得`

```js
// esm
import foo from "../../dist/foo.module.js";

console.log(foo); // [Function: o]
foo() // I am foo
```

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="application/javascript" src="../../dist/foo.umd.js"></script>
</head>
<body>

<script>
    console.log(window)
    console.log(window.JustMicrobundle) // ƒ (){var e="I am foo";return console.log(e),e}
    // 这个就是调用 foo()
    JustMicrobundle() // I am foo
</script>

</body>
</html>
```

`src/foo.js 如果是下面的写法 不含 default 使用 export`

```js
export function foo() {
    const message = 'I am foo';
    console.log(message)
    return message
}
```

`打包之后 测试就得`

```js
// esm
import {foo} from "../../dist/foo.module.js";

console.log(foo); // [Function: o]
foo() // I am foo
```

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="application/javascript" src="../../dist/foo.umd.js"></script>
</head>
<body>

<script>
    console.log(window)
    console.log(window.JustMicrobundle) // {foo: ƒ}
    // 这个就是调用 foo()
    JustMicrobundle.foo() // I am foo
</script>

</body>
</html>
```

### 3. 小知识

`详解AMD、CommonJS和UMD模块化规范`

```markdown
CJS: CommonJS模块可以说是当前最流行的模块定义规范。相比于AMD，它的工作效率更高、语法更简单。一开始，CommonJS模块是JavaScript服务器模块的规范。

AMD：Asynchronous Module Definition（异步模块规范），为浏览器设计的模块定义规范，最老的方式之一，专为浏览器而设计。

UMD：Universal Module Definition（通用模块规范），是由社区想出来的一种整合了CommonJS和AMD两个模块定义规范的方法。让你的模块能在javascript所有运行环境中发挥作用。
```

### 4. 代码段

`package.json`

```json
{
  "name": "foo",                     // your package name
  "type": "module",
  "source": "src/foo.js",            // your source code
  "exports": "./dist/foo.modern.js", // where to generate the modern bundle (see below)
  "main": "./dist/foo.cjs",          // where to generate the CommonJS bundle
  "module": "./dist/foo.module.js",  // where to generate the ESM bundle
  "unpkg": "./dist/foo.umd.js",      // where to generate the UMD bundle (also aliased as "umd:main")
  "scripts": {
    "build": "microbundle",          // compiles "source" to "main"/"module"/"unpkg"
    "dev": "microbundle watch"       // re-build when source files change
  }
}
```

## Author

👤 **LC ahlc@sina.cn**

## Show your support

Give a ⭐️if this project helped you!

***

_This README was generated with ❤️by
[readme-md-generator](https://github.com/kefranabg/readme-md-generator)_