# uni-insert-code-loader

> uni-app使用webpack打包时插入自定义代码的loader

Latest version **1.0.8** (published 2022-01-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install uni-insert-code-loader
pnpm add uni-insert-code-loader
yarn add uni-insert-code-loader
bun add uni-insert-code-loader
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-01-13 |
| First published | 2021-12-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hclle |
| Maintainers | hclle |

## Links

- npm: https://www.npmjs.com/package/uni-insert-code-loader
- npm.io page: https://npm.io/package/uni-insert-code-loader

## Dependencies (1)

- [gogocode](https://npm.io/package/gogocode.md) ^1.0.40

## Recent versions

- 1.0.8 (latest) — 2022-01-13
- 1.0.7 — 2022-01-13
- 1.0.6 — 2021-12-24
- 1.0.5 — 2021-12-08
- 1.0.4 — 2021-12-08
- 1.0.3 — 2021-12-08
- 1.0.2 — 2021-12-08
- 1.0.1 — 2021-12-08
- 1.0.0 — 2021-12-08

## README

# uni-insert-code-loader

uni-app使用webpack打包时插入自定义代码的loader，用于解决小程序中组件无法全局挂载，需要在页面单独引用的问题。



## 安装

```js
npm install uni-insert-code-loader --save-dev
```



## 使用方法

##### 在`vue.config.js`文件中添加loader

```js
module.export = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'uni-insert-code-loader',
            options: {
              pagesPath: path.resolve(__dirname, './src/pages.json'),
              componentsConfigs: {
                customComponent: {
                  name: 'CustomComponent',
                  templateContent: '<CustomComponent />',
                  importContent: `import CustomComponent from '@/components/CustomComponent'`
                },
              },
              globalTemplateComponents: ['customComponent'],
            }
          }
        ]
      }
    ]
  }
}
```



## 属性配置

|            名称            |   类型   | 是否必填 |                             描述                             |
| :------------------------: | :------: | :------: | :----------------------------------------------------------: |
|        `pagesPath`         | `String` |  `true`  | `pages.json`文件的路径，loader需要根据定义的路由进行注入操作。 |
|    `componentsConfigs`     | `Object` | `false`  |   组件配置，在`template`中注入的内容都需要在这里进行配置。   |
|       `styleConfigs`       | `Object` | `false`  |    样式配置，在`style`中注入的内容都需要在这里进行配置。     |
| `globalTemplateComponents` | `Array`  | `false`  |             全局配置，要在template中插入的组件。             |
|       `globalStyles`       | `Array`  | `false`  |              全局配置，要在style中插入的样式。               |
|       `pagesConfigs`       | `Object` | `false`  |   页面单独配置，优先级高于全局，如果配置了会忽略全局配置。   |



##### `componentsConfigs`

> 属性
> |       名称        |   类型   | 是否必填 |                             描述                             |
> | :---------------: | :------: | :------: | :----------------------------------------------------------: |
> |      `name`       | `String` | `false`  | 组件的名称，如果是单独引入的组件，需要组件名称在`components`中注册该组件，全局注册的组件不需要。 |
> | `templateContent` | `String` | `false`  |                  在`template`中注入的内容。                  |
> |  `importContent`  | `String` | `false`  |                   在`script`中引用的内容。                   |
>
> 以上的属性都不是非必填的，可以单独每一项。
>
> 如：
>
> 单独注入`templateContent`
>
> ```js
> componentsConfigs: {
>     customComponent: {
>         templateContent: `
>             <view class="custom-view">
>             	<text>页面单独引入</text>
>             	<image class="custom-image" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92b1f16e05864315b3d396951d25aaee~tplv-k3u1fbpfcp-watermark.awebp" />
>             </view>
>         `
>     }
> }
> ```
>
> 单独注入`importContent`  
>
> ```js
> componentsConfigs: {
>     customComponent: {
>         importContent: `import 'custom.css'`
>     }
> }
> ```



##### `styleConfigs`

>|   名称    |   类型   | 是否必填 |         描述          |
>| :-------: | :------: | :------: | :-------------------: |
>| `content` | `String` |  `true`  | 在`style`中注入的内容 |
>
>如：
>
>```js
>styleConfigs: {
>    customComponent: {
>        content: `
>            .custom-view {
>            	width: 100%;
>            	text-align: center;
>            	.custom-image {
>            		border-radius: 25px;
>            	}
>            }
>        `
>    }
>}
>```



`globalTemplateComponents`

> 注入的内容需要在`componentsConfigs`中定义
>
> ```js
> globalTemplateComponents: ['customComponent']
> ```



`globalStyles`

> 注入的内容需要在`styleConfigs`中定义
>
> ```js
> globalStyles: ['customComponent']
> ```



`pagesConfigs`

> 注入的路由需要在`pages.json`文件中定义，内容需要在`componentsConfigs`和`styleConfigs`中定义
>
> ```js
> pagesConfigs: {
>     'pages/index/index': {
>         templateComponents: ['customComponent'],
>         styles: ['customComponent']
>     }
> }
> ```

---
_Source: https://npm.io/package/uni-insert-code-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._