npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

html-webpack-inject-externals-plugin

v0.1.14

Published

根据外部依赖配置,自动生成并插入script或link标签。

Downloads

446

Readme

HtmlWebpackInjectExternalsPlugin

根据外部依赖配置,自动生成并插入script或link标签。

By configure externals packages settings, auto inject script or link tag into html template.

Notice

仅支持webpack > 5

Only works with webpack 5 and html-webpack-plugin 5.

To work with webpack 4, try https://github.com/shirotech/webpack-cdn-plugin.

介绍 / Intro

html-webpack-plugin一起使用,将项目中的外部依赖自动按版本号生成script或link标签,注入html文件的header中。

目前支持依据加载路径的后缀名生成标签,.css生成link标签,其他的都生成script标签。

Work together with html-webpack-plugin, get your project dependencies correct version to generate script or link tag, then inject them into your html template header.

For now only support suffix with .css for link tag, all other suffixes will be script tags.

安装 / Install

yarn add html-webpack-inject-externals-plugin

配置示例代码 / Config example

const { HtmlWebpackInjectExternalsPlugin } from 'html-webpack-inject-externals-plugin'
const isProd = process.env.NODE_ENV === 'production'

  ...
  plugins: [
    new HtmlWebpackInjectExternalsPlugin({
      externals: {
        history: 'History',
      },
      host: 'https://unpkg.com',
      packages: [
        {
          name: 'history',
          path: `/umd/history.${isProd ? 'min.' : ''}js`,
        },
      ],
    })
  ]

以上配置可生成script标签并插入document.head,如下

Above config will generate result like:

<!--开发环境/development env -->
<script src="https://unpkg.com/[email protected]/umd/history.js"></script>
<!--生产环境/production env -->
<script src="https://unpkg.com/[email protected]/umd/history.min.js"></script>

其中的版本号以当前项目所依赖的版本号保持一致。

The version part will be your project real dependencies version.

使用方法 / Usage

在webpack配置文件中引入插件

  • 💡 必须与html-webpack-plugin一起使用。

    Must work with html-webpack-plugin together.

  • 💡 html-webpack-plugin版本需要 > 4

    Require html-webpack-plugin version >4.

  • 🍾 兼容webpack 5,在next分支上测试。

    Compatible with webpack 5, tested in next branch.

Javascript

const { HtmlWebpackInjectExternalsPlugin } = require('html-webpack-inject-externals-plugin')

Typescript

import { HtmlWebpackInjectExternalsPlugin } from 'html-webpack-inject-externals-plugin'

添加到plugins项 / add to plugins

  plugins: [
    ...,
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
    }),
    new HtmlWebpackInjectExternalsPlugin({
      // externals项,非必须,可以写在这里,也可以直接写在webpack的externals中。
      externals: {
        history: 'History',
      },
      host: 'https://unpkg.com',
      packages: [
        {
          name: 'history',
          path: '/umd/history.js',
        },
        {
          name: 'animate.css',
          fullPath: 'https://unpkg.com/[email protected]/animate.css',
        },
      ],
    })
  ]

参数解释 / Config Option

interface OPTION {
  // same with webpack externals. as below:
  // {
  //   react: 'React'
  //   'antd/lib/locale/zh_CN': ['antd', 'locales', 'zh_CN'],
  // }
  // this is optional, set it at webpack config part, works the same way.
  externals?: {
    [packageName: string]: string | string[]
  }

  // full host with protocol, like "https://unpkg.com"
  host?: string

  // your externals dependencies
  packages: {
    /**
     * 如果有的包需要从其他站点或路径引入,
     * 可配置其他的类似unpkg功能的地址
     * 一般不需要单独配置
     * @example https://unpkg.my.com
     * */
    host?: string

    /**
     * 包名称
     * */
    name: string

    /**
     * 需要引用的包内的文件路径
     * @example `/umd/react.${isProd ? 'production.min' : 'development'}.js`
     */
    path?: string

    /**
     * 使用fullPath则完全使用该项,不再从模块的package.json中自动拼接路径
   * @example: http://cdnjs.com/react/react.min.prodjction.js
     * */
    fullPath?: string

    /**
     * 定制标签属性
    * */
    attributes?: Record<string, string | boolean>

    /**
     * 默认按path或fullPath中的后缀名判断,js为script,css为link
     * 没有后缀默认按script
     * 也可以使用该项指定,覆盖自动判断行为
     * */
    tagName?: string

    /**
     * 每个标签前面面,可以自定义一个跟随的标签
     * 内容完全自定义
     * */
    injectBefore?: HtmlTagObject

    /**
     * 每个标签后面,可以自定义一个跟随的标签
     * 内容完全自定义
     * */
    injectAfter?: HtmlTagObject

    /**
     * 是否采用本地模式,即将node_modules中的文件复制到发布文件夹中
     * 使用了fullPath的package不会处理
     * */
    local?: boolean

    /**
     * 本地模式配合使用的文件夹前缀
     * 例如 /assets 或 /static
     * */
    localPrefix?: string
  }[]
}