@0xdv/webpack-userscript 中文文档教程

Question

webpack-userscript

用于用户脚本项目的 Webpack4+ 插件。 ？？？

该包已从 webpack-tampermonkey 重命名。

Features

• Combine your userscript development with Webpack

借助强大的 Webpack 支持，您甚至可以打包用户脚本中的所有内容，例如图标和 json 数据。

• Ability to generate userscript headers
• Ability to generate both .user.js and .meta.js .meta.js is used for update check containing headers only.
• Properly track files in watch mode Including external header files and package.json.

Installation

npm i webpack-userscript -D

Usage

webpack.config.js

将插件包含在 webpack.config.js 中，如下例所示。

const WebpackUserscript = require('webpack-userscript')

module.exports = {
  plugins: [
    new WebpackUserscript()
  ]
}

Examples

Hot Development

以下示例可以在 webpack-dev-server。

webpack-dev-server 将在 watch 模式下构建用户脚本。 每次构建项目时，buildNo变量都会增加1。

在下面的配置中，version的一部分包含buildNo； 因此，每次构建时，version 也会增加，以指示可用于脚本引擎（如 Tampermonkey 或 GreaseMonkey）的新更新。

第一次启动 webpack-dev-server 后，您可以通过 http://localhost:8080/.user.js 安装脚本（该URL实际上是指您配置的webpack-dev-server）。 安装后，无需手动重新安装脚本，直到您停止服务器。 要更新脚本，脚本引擎在 GUI 上为您提供了一个更新按钮。

• webpack.config.dev.js

const path = require('path')
const WebpackUserscript = require('webpack-userscript')
const dev = process.env.NODE_ENV === 'development'

module.exports = {
  mode: dev ? 'development' : 'production',
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '<project-name>.user.js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist')
  },
  plugins: [
    new WebpackUserscript({
      headers: {
        version: dev ? `[version]-build.[buildNo]` : `[version]`
      }
    })
  ]
}

Other

其他示例可以在 测试夹具文件夹 下找到。

Configuration

WebpackUserscript

WebpackUserscript 构造函数具有以下签名。

new WebpackUserscript(options)

options

另请参阅选项架构。

type WebpackUserscriptOptions =
  WPUSOptions |
  HeaderFile |   // shorthand for WPUSOptions.headers
  HeaderProvider // shorthand for WPUSOptions.headers

WPUSOptions

interface WPUSOptions {
  headers: HeaderFile | HeaderProvider | HeaderObject

  /**
   * Output *.meta.js or not
   */
  metajs: boolean

  /**
   * Rename all .js files to .user.js files.
   */
  renameExt: boolean

  /**
   * Prettify the header
   */
  pretty: boolean
}

HeaderFile

导出标头对象或标头提供程序函数的 js 或 json 文件的路径。

type HeaderFile = string

HeaderProvider

返回标头对象的函数。

type HeaderProvider = (data: DataObject) => HeaderObject

HeaderObject

一个标头对象，其叶子是 [] 格式的类似 webpack 的模板字符串。 可以在 DataObject 中找到可用变量。

另见 explicit-config/webpack.config.js 和 template-strings/webpack.config.js。

type HeaderObject = Record<string, string | Array<string>>

DataObject

用于插入 HeaderObject 模板的局部变量。

interface DataObject {
  /**
   * Hash of Webpack compilation
   */
  hash: string

  /**
   * Webpack chunk hash
   */
  chunkHash: string

  /**
   * Webpack chunk name
   */
  chunkName: string

  /**
   * Entry file path, which may contain queries
   */
  file: string

  /**
   * Query string
   */
  query: string

  /**
   * Build number
   */
  buildNo: number

  /**
   * Info from package.json
   */
  name: string
  version: string
  description: string
  author: string
  homepage: string
  bugs: string // URL
}

另请参阅 template-strings/webpack.config.js。