@xysfe/rollup-plugin-auto-html

Rollup plugin to auto inject script into html file

Usage no npm install needed!

<script type="module">
  import xysfeRollupPluginAutoHtml from 'https://cdn.skypack.dev/@xysfe/rollup-plugin-auto-html';
</script>

README

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文件，效果如下：

示例图片1

示例图片2

配置项

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} '' 模板文件的路径，会在标签前插入模板文件的内容