rollup-plugin-auto-html

下载

npm i @xysfe/rollup-plugin-auto-html -D

使用方式

rollup.config.js

import html from '@xysfe/rollup-plugin-auto-html'

const configMap = {
  'app': {
    prefix: 'public/h5/',
    htmlName: 'appjs',
    templatePath: '',
  },
  'tongji': {
    prefix: '',
    templatePath: ''
  },
  'gb750': {
    prefix: 'public/h5/'
  }
}

const config = [
  {
    plugins: [
      html({ configMap, env: process.env.NODE_ENV })
    ]
  }
]

注意事项

1. 插件强依赖于NODE_ENV环境变量，用于处理线上发布后会导致测试环境资源不可访问的现状，若没有该变量则会退出构建。正式环境的NODE_ENV必须是production，否则无法构建出正确的资源路径。

   NODE_ENV环境变量注入方式:

   // file: package.json
   "scripts": {
     "dev": "cross-env NODE_ENV=development npm run bundle",
     "dist": "cross-env NODE_ENV=production npm run bundle"
   }

2. 如果不传入configMap配置项，插件将不会生成html文件，该配置项的每一个key值，都对应着一个html文件

功能

该插件会生成html文件，并将打包后的文件以标签的形式引入html文件，效果如下：

配置项

| Name | Type | Default | Description | | ---- | ---- | ---- | ---- | | configMap | {Object} | {} | 生成html文件的配置 | | env | {String} | undefined | 环境变量 |

注意：configMap配置项的key值，应为文件入口名。

configMap配置选项

| Name | Type | Default | Description | | ---- | ---- | ---- | ---- | | prefix | {String} | '' | 生成html文件的目录前缀 | | htmlName | {String} | '' | 生成html文件的文件名 | | templatePath | {String} | '' | 模板文件的路径，会在标签前插入模板文件的内容 |