open-index/open-npm huggingface dataset:
npm package: @m-f2e/vite-plugin-css-injected-bundle
Description: vite plugin将css注入js
Author: mz 16619930394@163.com
Latest version: 0.0.2

# vite-plugin-starter

## 技术栈
* vite
* unbuild
* vitest
* playground
* husky

## 安装
```shell
npm i @m-f2e/vite-plugin-css-injected-bundle
```

## 使用
```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { VitePluginCssInjectedBundle } from '../src'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    VitePluginCssInjectedBundle(),
  ],
  resolve: {
    alias: {
      '@': '.',
    },
  },
})
```

给样式添加id
```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { VitePluginCssInjectedBundle } from '../src'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    VitePluginCssInjectedBundle({ styleId: 'vite-js' }),
  ],
  resolve: {
    alias: {
      '@': '.',
    },
  },
})
```


## 项目

### test

```shell
pnpm test
```

### build

```shell
pnpm build
pnpm stub
```

### playground

```shell
pnpm dev:playground
pnpm build:playground
pnpm preview
```
npm package: @m-fe/address
Description: @m-fe/address
Author: wx-chevalier@github
Latest version: 0.0.2

# @m-fe/utils

Utils for JavaScript data structures, funcs and dom elements manipulation, etc.

# Usage

# Development

# About

# Motivation & Credits

- [fbjs #Project#](https://github.com/facebook/fbjs): A collection of utility libraries used by other Facebook JS projects.

- https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts

- https://github.com/jhdevuk/tsdom
npm package: @m-fe/docsify-x
Description: Quickly document your (typescript or otherwise) projects!
Latest version: 0.0.11

# docsify-tools

Quickly document your (typescript or otherwise) projects!

- docsify-init provides a client-side [Docsify](https://docsify.js.org/) based markdown
  documentation site with full text search
- generate-ts-doc generates markdown documentation from api-extractor api.json files
- docsify-auto-sidebar automatically populates the sidebar from the resulting docs tree

本项目是对 docsify-tools 的定制化升级，包括支持 .index 文件默认排序、默认隐藏 examples 目录等。

### docsify-init

Usage:

```sh
docsify-init [-r repoDir] [-d docsDir]

npm run ts src/docsify-sync-to-hugo.ts --src /Users/zhangzixiong/Desktop/Docs/Business/Industry-Series --target /Users/zhangzixiong/Desktop/Workspace/Github/ngte/seo-markdown-blog-site/hugo/content/books
```

Initializes docsify in the specified repo and docs sub-directory. By default, the repo is the
current directory and the subdirectory is "docs".

You can use `docsify-init -r . -d .` to initialize in a pure-documentation repo.

### docsify-auto-sidebar

Usage:

```sh
docsify-auto-sidebar -d docs
```

Generates a new `_sidebar.md` for docsify. You can prefix directories with a number and a dash to control the ordering, the number and dash will not appear in the sidebar text. For example:

    1-Guides
    2-API

will result with "Guides" and "API" items in the sidebar. Other dashes will be replaced with spaces

### generate-ts-doc

Like api-documenter, but it doesn't generate separate files for methods or properties. Create. the .api.json files in a directory (e.g. in docs/2-API) and then run it:

```sh
generate-ts-doc markdown -i docs/2-API -o docs/2-API
```

## Notes

Don't forget to [setup your repo so that github generates a documentation site](https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages)
npm package: @m-fe/effect
Description: @m-fe/effect
Author: wx-chevalier@github
Latest version: 0.0.1

# @m-fe/utils

Utils for JavaScript data structures, funcs and dom elements manipulation, etc.

# Usage

# Development

# About

# Motivation & Credits

- [fbjs #Project#](https://github.com/facebook/fbjs): A collection of utility libraries used by other Facebook JS projects.

- https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts

- https://github.com/jhdevuk/tsdom
npm package: @m-fe/react-commons
Description: Common Snippets for React Application
Author: wx-chevalier@github
Latest version: 0.1.3

# react-commons

react-commons 是对应用开发过程中的常见组件进行抽取，以 CJS/UMD 形式发布。

# About

## Acknowledgements

- [hooks](https://github.com/alibaba/hooks)
npm package: @m-fe/taro-common
Description: Taro 第三方 UI 库示范用例
Author: wx-chevalier
Latest version: 0.0.1

# 基于 Taro 的多端 UI 库示范用例

> 通过 Taro 提供的多端 UI 库打包能力，可以打包出一个多端运行的 UI 库，目前已经支持 微信/支付宝/百度小程序以及 H5，RN 端的支持还在调研中

## 多端 UI 库项目结构

多端 UI 库的项目目录结构与普通 Taro 项目基本一致，不同点如下

#### 增加一个 UI 库入口文件

需要在 `src` 目录下添加 `index.js` 或者 `index.ts` 来作为 UI 库的入口文件，用于输出 UI 组件，如果有多个 UI 组件，可以如下书写

```javascript
export { default as A } from './components/A/A'
export { default as B } from './components/B/B'
```

这样的话，这个组件库使用起来，会是如下的方式

```javascript
import { A } from 'taro-ui-sample'

<A />
```

如果只有 UI 组件，也可以如下书写

```javascript
import A from './components/A/A'

export default A
```

这样的话，这个组件库使用起来，会是如下的方式

```javascript
import A from 'taro-ui-sample'

<A />
```

#### 配置文件改造

为了打包出可以在 H5 端使用的组件库，需要在 `config/index.js` 文件中增加一些配置

```javascript
if (process.env.TARO_BUILD_TYPE === 'ui') {
  Object.assign(config.h5, {
    enableSourceMap: false,
    enableExtract: false,
    enableDll: false
  })
  config.h5.webpackChain = chain => {
    chain.plugins.delete('htmlWebpackPlugin')
    chain.plugins.delete('addAssetHtmlWebpackPlugin')
    chain.merge({
      output: {
        path: path.join(process.cwd(), 'dist', 'h5'),
        filename: 'index.js',
        libraryTarget: 'umd',
        library: 'taro-ui-sample'
      },
      externals: {
        nervjs: 'commonjs2 nervjs',
        classnames: 'commonjs2 classnames',
        '@tarojs/components': 'commonjs2 @tarojs/components',
        '@tarojs/taro-h5': 'commonjs2 @tarojs/taro-h5',
        'weui': 'commonjs2 weui'
      }
    })
  }
}
```

以上配置可以根据需要自行修改。

#### package.json 依赖处理

package.json 中 `dependencies` 中只放必要的依赖，并且建议尽量精简，原有 Taro 相关的依赖可以放到 `devDependencies` 中，这样安装 UI 库的时候不需要再重复安装

## 打包命令

在完成以上项目结构改造后，你就可以获得一个 Taro 的多端 UI 库的项目了

这时候你可以通过如下命令来进行打包

```bash
$ TARO_BUILD_TYPE=ui taro build --ui
```

打包之后的文件在 `dist` 目录下

里面会包含一个 `index.js` 的入口文件，内容如下，需要注意的是，这个内容是 Taro 自动生成的，不可修改

```javascript
if (process.env.TARO_ENV === 'h5') {
  module.exports = require('./h5/index')
  module.exports.default = module.exports
} else {
  module.exports = require('./weapp/index')
  module.exports.default = module.exports
}
```

H5 端以及小程序类（微信/支付宝/百度）的文件分别在 `h5` 和 `weapp` 目录下，通过入口文件就能在不同的端内进行引用

## 项目测试

推荐采用 [jest](https://jestjs.io/) 进行测试，项目中已经包含了完整的测试配置与范例，可以直接使用，有以下值得注意的地方

#### 使用 babel-jest

转换器使用 `babel-jest`，为了配合 babel 7 进行使用，需要安装

```bash
$ yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core
```

其中 `babel-core@^7.0.0-bridge.0` 一定要安装

#### babel.config.js

由于测试使用了 babel 7，为了避免和 Taro 本身使用的 babel 冲突，测试使用的 babel 配置位于 `babel.config.js` 中
npm package: @m-fe/types
Description: @m-fe/types
Author: wx-chevalier@github
Latest version: 0.0.1

# @m-fe/utils

Utils for JavaScript data structures, funcs and dom elements manipulation, etc.

# Usage

# Development

# About

# Motivation & Credits

- [fbjs #Project#](https://github.com/facebook/fbjs): A collection of utility libraries used by other Facebook JS projects.

- https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts

- https://github.com/jhdevuk/tsdom
npm package: @m-fe/utils
Description: @m-fe/utils
Author: wx-chevalier@github
Latest version: 23.10.26

# @m-fe/utils

Utils for JavaScript data structures, funcs and dom elements manipulation, etc.

# Usage

# Development

# About

## Motivation & Credits

- [fbjs #Project#](https://github.com/facebook/fbjs): A collection of utility libraries used by other Facebook JS projects.

- https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts

- https://github.com/jhdevuk/tsdom

- [slash](https://github.com/toss/slash): A collection of TypeScript/JavaScript packages to build high-quality web services.
npm package: @m-fe/weapp-axios
Description: @m-fe/weapp-axios
Author: wx-chevalier@github
Latest version: 0.0.7

## @m-fe/weapp-axios

### 特征

- 提供和 axios 相似体验，支持默认参数配置，拦截功能，和 create 创建新的对象
- 默认将小程序的 api 封装成 Promise，通过降级，兼容低版本手机系统

### 使用方法

npm i @m-fe/weapp-axios -S

[小程序 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)

[小程序代码片段测试](https://developers.weixin.qq.com/s/GSiAP0mj787V)

```ts
import Abi from '@m-fe/weapp-axios';
let api = Abi();
```

传递相关配置来创建请求(以下参数为默认)

```ts
// 详情可参考 wx.request
let api = Abi({
  url: '', //默认的接口后缀
  method: 'get', //默认的HTTP 请求方法
  dataType: 'json', //默认的返回类型
  responseType: 'text',
  header: {
    'content-type': 'application/json',
  },
});
```

除上面的创造方法外，我们还可以用实例上的 create 的方法创建新实例。

```ts
let api = Abi();
let newApi = api.create();
```

请求操作

```ts
/**
*默认是get
*如果你设置了默认的url。会自动配置 默认url + url
*如果你的url是http://或者https://开头，那么不会添加默认url
*/
//多种请求方式
api(url, data)
api(SERVER[api], apiData)
api.get(SERVER[api], apiData)
api(SERVER.URL + SERVER[api], apiData)
api(`${SERVER[api]}?page=${apiData.page}&count=${apiData.count}`)
api({
   url: SERVER[api],
   data: apiData,
   <!--method: 'get',-->
   <!--dataType: 'json',-->
   <!--responseType: 'text',-->
   <!--header: {-->
   <!--    content-type': "application/json"-->
   <!--}-->
})

api.post(url, data)
支持
'get',
'post',
'put',
'delete',
'options',
'head',
'trace',
'connect'
```

可以架起请求、响应、成功、失败的拦截

```ts
api.interceptors.response.use(
  function(config) {
    //接口||wx.接口
    return config.data || config;
  },
  function(error) {
    return error;
  },
);

api.interceptors.request.use(
  function(config) {
    // 返回的是和wx.request相关的参数
    wx.showLoading({
      title: '加载内容',
    });
  },
  function(error) {
    return error;
  },
);
```

wx 全 Promise

```ts
api.wx
  .chooseImage()
  .then(res => api.wx.uploadFile())
  .then();
```

当然，如果你并不需要这个功能，你也可以在创建的时候设置第二个参数为 false