open-index/open-npm huggingface dataset:
npm package: @superying/remote-load
Description: [![Greenkeeper badge](https://badges.greenkeeper.io/rollup/rollup-starter-lib.svg)](https://greenkeeper.io/)
Latest version: 1.0.0

# rollup-starter-lib

[![Greenkeeper badge](https://badges.greenkeeper.io/rollup/rollup-starter-lib.svg)](https://greenkeeper.io/)

This repo contains a bare-bones example of how to create a library using Rollup, including importing a module from `node_modules` and converting it from CommonJS.

We're creating a library called `how-long-till-lunch`, which usefully tells us how long we have to wait until lunch, using the [ms](https://github.com/zeit/ms) package:

```js
console.log('it will be lunchtime in ' + howLongTillLunch());
```

## Getting started

Clone this repository and install its dependencies:

```bash
git clone https://github.com/rollup/rollup-starter-lib
cd rollup-starter-lib
npm install
```

`npm run build` builds the library to `dist`, generating three files:

* `dist/how-long-till-lunch.cjs.js`
    A CommonJS bundle, suitable for use in Node.js, that `require`s the external dependency. This corresponds to the `"main"` field in package.json
* `dist/how-long-till-lunch.esm.js`
    an ES module bundle, suitable for use in other people's libraries and applications, that `import`s the external dependency. This corresponds to the `"module"` field in package.json
* `dist/how-long-till-lunch.umd.js`
    a UMD build, suitable for use in any environment (including the browser, as a `<script>` tag), that includes the external dependency. This corresponds to the `"browser"` field in package.json

`npm run dev` builds the library, then keeps rebuilding it whenever the source files change using [rollup-watch](https://github.com/rollup/rollup-watch).

`npm test` builds the library, then tests it.

## Variations

* [babel](https://github.com/rollup/rollup-starter-lib/tree/babel) — illustrates writing the source code in ES2015 and transpiling it for older environments with [Babel](https://babeljs.io/)
* [buble](https://github.com/rollup/rollup-starter-lib/tree/buble) — similar, but using [Bublé](https://buble.surge.sh/) which is a faster alternative with less configuration
* [TypeScript](https://github.com/rollup/rollup-starter-lib/tree/typescript) — uses [TypeScript](https://www.typescriptlang.org/) for type-safe code and transpiling



## License

[MIT](LICENSE).
npm package: @superying/remote-ui
Description: 用于 Vue3 项目远程引入本【公司内部 UI 框架】`umd` 模式资源
Latest version: 1.0.6

# Remote-UI
用于 Vue3 项目远程引入本【公司内部 UI 框架】`umd` 模式资源   

## 使用方法   
1. **安装 remote-ui**   
   ```
    npm i --save @superying/remote-ui
   ```

2. **main.ts**   
   ```
   import * as Vue from 'vue'
   import App from './App.vue'
   import { useRemoteUI } from '@superying/remote-ui'

   const app = Vue.createApp(App)

   await useRemoteUI({ Vue, app })

   app.mount('#app')
   ```

3. **组件使用**   
   组件全局挂载，业务系统无需手动引入组件，直接使用即可。   
   例如：使用 ElButton
   ```
   <template>
      <el-button type="primary">remote-ui</el-button>
   </template>
   ```
   
4. **内置函数使用**   
   组件库内置函数已挂载到 app.config.globalProperties，以全局函数的形式使用。   
   内置函数包括 $alert, $confirm, $loading, $message, $messageBox, $msgbox, $notify, $prompt。   
   例如：使用 $message
   ```
   <template>
      <el-button @click="handleClick">remote-ui message</el-button>
   </template>
   <script setup>
      import { getCurrentInstance } from 'vue'
      const _this = getCurrentInstance().appContext.config.globalProperties

      const handleClick = () => {
         _this.$message('我是 remote-ui')
      }
   </script>
   ```

5. 内置指令使用
   组件库内置指令已全局注册，可直接使用。   
   内置指令包括 InfiniteScroll, loading, popover。
   例如：使用 loading
   ```
   <template>
      <div v-loading="loading"><div>
   </template>
   <script setup>
      import { ref } from 'vue'
      const loading = ref(true)

      setTimeout(() => {
         loading.value = false
      }, 2000)
   </script>
   ```
## 温馨提示   
* 当前仅支持引入 umd 模式的远程资源   
* 启用 top-level-await：   
   1.安装 babel 插件 ： @babel/plugin-syntax-top-level-await   
   ```
   npm i --save-dev @babel/plugin-syntax-top-level-await
   ```
   2.配置 babel.config.js   
   ```
   module.exports = {
      plugins: [
         '@babel/plugin-syntax-top-level-await', // top-level-await
      ]
   }
   ```
   3.配置 vue.config.js   
   ```
   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
      configureWebpack: {
         experiments: {
            topLevelAwait: true // top-level-await
         }
      }
   })
   ```

## TODO
* 支持引入 esm 资源，外部系统使用与 npm module 方式相同。