# babel-plugin-on-demand-loading

> 按需加载插件

Latest version **0.0.9** (published 2018-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-on-demand-loading
pnpm add babel-plugin-on-demand-loading
yarn add babel-plugin-on-demand-loading
bun add babel-plugin-on-demand-loading
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2018-09-13 |
| First published | 2018-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | muyunyun |
| Maintainers | muyunyun |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-on-demand-loading
- Repository: https://github.com/demos-platform/babel-plugin-diana
- Homepage: https://github.com/demos-platform/babel-plugin-diana#readme
- Issues: https://github.com/demos-platform/babel-plugin-diana/issues
- npm.io page: https://npm.io/package/babel-plugin-on-demand-loading

## Dependencies (2)

- [babel-core](https://npm.io/package/babel-core.md) ^6.26.3
- [babel-types](https://npm.io/package/babel-types.md) ^6.26.0

## Recent versions

- 0.0.9 (latest) — 2018-09-13
- 0.0.8 — 2018-09-11
- 0.0.7 — 2018-09-10
- 0.0.6 — 2018-09-10
- 0.0.5 — 2018-09-10
- 0.0.4 — 2018-09-10
- 0.0.3 — 2018-09-08
- 0.0.2 — 2018-09-08

## README

[![npm version](https://badge.fury.io/js/babel-plugin-on-demand-loading.svg)](https://badge.fury.io/js/babel-plugin-on-demand-loading) ![LICENSE MIT](https://img.shields.io/npm/l/babel-plugin-on-demand-loading.svg)

[diana](https://github.com/MuYunyun/diana) 配套按需加载 babel 插件，[更新日志](CHANGELOG.md)

### Usage

```
npm install --save-dev babel-plugin-on-demand-loading
```

使用方式一：在 `.babelrc` 里进行配置(推荐):

```js
// .babelrc
{
  "plugins": [
    ["on-demand-loading", {"library": "diana"}]
  ]
}

// 配合 webpack 里的 babel-loader
module: {
  rules: [{
    test: /\.js$/,
    loader: "babel-loader",
  }]
},
```

使用方式二：在 webpack 里进行配置：

```diff
module: {
  rules: [{
    test: /\.js$/,
    loader: "babel-loader",
+   options: {
+     plugins: [
+       ["on-demand-loading", { "library": "diana" }],
+     ]
+   }
  }]
},
```

### Principle

```js
import { equal } from 'diana'
```

上述代码经过此插件转换后等同于下列代码，从而实现按需加载

```js
import equal from 'diana/lib/equal'
```

### 源码分析

```js
const babel = require('babel-core');
const types = require('babel-types');

module.exports = function (babel) {
  return {
    visitor: {
      ImportDeclaration(path, ref = { opts: {} }) {
        let node = path.node
        let { specifiers } = node
        if (ref.opts.library === node.source.value
          && !types.isImportDefaultSpecifier(specifiers[0])         // 过滤 import { equal } from 'diana'
          && !types.isImportNamespaceSpecifier(specifiers[0])) {    // 过滤 import * as _ from 'diana'
          let newImports = specifiers.map(specifier => {
            return types.importDeclaration([types.importDefaultSpecifier(specifier.local)], types.stringLiteral(`${node.source.value}/lib/${specifier.local.name}`))
          })
          path.replaceWithMultiple(newImports)
        }
      }
    }
  }
}
```

[按需加载实践](https://github.com/demos-platform/onDemandLoading)

---
_Source: https://npm.io/package/babel-plugin-on-demand-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._