feat: html inline script webpack plugin

icelam · icelam · commit 979d3c8bf969 · 2020-07-09T14:38:17.000+08:00
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+max_line_length = 0
+indent_size = 4
+trim_trailing_whitespace = false
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+README.md
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,40 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-base"
+  ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".ts",
+          ".d.ts"
+        ]
+      }
+    }
+  },
+  "rules": {
+    "no-param-reassign": "off",
+    "comma-dangle": ["error", "never"],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "optionalDependencies": false
+      }
+    ],
+    "import/extensions": [
+      "error",
+      {
+        "js": "never",
+        "ts": "never",
+      }
+    ]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+
+yarn-debug.log*
+yarn-error.log*
+
+/dist
diff --git a/.huskyrc b/.huskyrc
@@ -0,0 +1,6 @@
+{
+  "hooks": {
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+    "pre-commit": "lint-staged"
+  }
+}
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,8 @@
+{
+  "src/**/*.{json,md}": [
+    "prettier --single-quote --write"
+  ],
+  "src/**/*.{js,ts}": [
+    "eslint --report-unused-disable-directives --fix --quiet"
+  ]
+}
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,11 @@
+/src
+tsconfig.json
+.editorconfig
+.eslintrc
+.huskyrc
+.lintstagedrc
+.nvmrc
+.versionrc
+commitlint.config.js
+yarn-error.log
+yarn.lock
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+12.16.1
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Ice Lam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,44 @@
+# HTML Inline Script Webpack Plugin (html-inline-script-webpack-plugin)
+A webpack plugin for converting external script files `<script src="app.js"></script>` to inline script block `<script>...</script>`. Requires [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) to work.
+
+Inspired by [react-dev-utils](https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/InlineChunkHtmlPlugin.js) created by [Facebook](https://github.com/facebook/).
+
+## Install
+### NPM
+```bash
+npm i html-inline-script-webpack-plugin -D
+```
+### Yarn
+```bash
+yarn add html-inline-script-webpack-plugin -D
+```
+
+## Usage
+By default, the plugin will convert all the external script files to inline script block.
+```js
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new HtmlInlineScriptPlugin(),
+  ]
+}
+```
+
+To limit the scope of the plugin, specify lists of files you wish to convert in regular expressions:
+```js
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new HtmlInlineScriptPlugin([
+      /runtime~.+[.]js/,
+      /app~.+[.]js/
+    ]),
+  ]
+}
+```
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional']
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "html-inline-script-webpack-plugin",
+  "version": "1.0.0",
+  "description": "A webpack plugin for converting external script files to inline script block. Requires 'html-webpack-plugin' to work.",
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "rm -rf ./dist && tsc --build --force --verbose",
+    "lint": "eslint --ext .ts,js src",
+    "prepare": "install-peers",
+    "first-release": "standard-version --commit-all --tag-prefix v --first-release",
+    "release": "standard-version --commit-all --tag-prefix v"
+  },
+  "author": "Ice Lam",
+  "repository": {
+    "url": "https://github.com/icelam/html-inline-script-webpack-plugin",
+    "type": "git"
+  },
+  "license": "MIT",
+  "keywords": [
+    "webpack",
+    "webpack4",
+    "webpack-plugin",
+    "html-webpack-plugin",
+    "inline",
+    "internal",
+    "embedded",
+    "inline-source",
+    "script",
+    "inline-script"
+  ],
+  "devDependencies": {
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
+    "@types/html-webpack-plugin": "^3.2.3",
+    "@types/webpack-sources": "^1.4.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
+    "eslint": "^7.4.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "husky": "3.1.0",
+    "install-peers-cli": "^2.2.0",
+    "lint-staged": "^10.2.11",
+    "prettier": "^2.0.5",
+    "standard-version": "^8.0.0",
+    "typescript": "^3.9.6"
+  },
+  "peerDependencies": {
+    "html-webpack-plugin": "^4.0.0",
+    "webpack": "^4.0.0"
+  }
+}
diff --git a/src/HtmlInlineScriptPlugin.ts b/src/HtmlInlineScriptPlugin.ts
@@ -0,0 +1,80 @@
+import { Compiler } from 'webpack';
+import { RawSource } from 'webpack-sources'; // eslint-disable-line import/no-extraneous-dependencies
+import htmlWebpackPlugin, { HtmlTagObject } from 'html-webpack-plugin';
+import { PLUGIN_PREFIX } from './constants';
+
+class HtmlInlineScriptPlugin {
+  tests: RegExp[];
+
+  constructor(tests?: RegExp[]) {
+    this.tests = tests || [/.+[.]js/];
+  }
+
+  isFileNeedsToBeInlined(
+    assetName: string
+  ): boolean {
+    return this.tests.some((test) => assetName.match(test));
+  }
+
+  processScriptTag(
+    publicPath: string,
+    assets: { [key: string]: RawSource },
+    tag: HtmlTagObject
+  ): HtmlTagObject {
+    if (tag.tagName !== 'script' || !tag.attributes?.src) {
+      return tag;
+    }
+
+    const scriptName = (tag.attributes.src as string).replace(publicPath, '');
+
+    if (!this.isFileNeedsToBeInlined(scriptName)) {
+      return tag;
+    }
+
+    const asset = assets[scriptName];
+
+    if (!tag) {
+      return tag;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { src, ...attributesWithoutSrc } = tag.attributes;
+
+    return {
+      tagName: 'script',
+      innerHTML: asset.source(),
+      voidTag: false,
+      attributes: attributesWithoutSrc
+    };
+  }
+
+  apply(compiler: Compiler): void {
+    let publicPath = compiler.options?.output?.publicPath || '';
+
+    if (publicPath && !publicPath.endsWith('/')) {
+      publicPath += '/';
+    }
+
+    compiler.hooks.compilation.tap(`${PLUGIN_PREFIX}_compilation`, (compilation) => {
+      const hooks = htmlWebpackPlugin.getHooks(compilation);
+
+      hooks.alterAssetTags.tap(`${PLUGIN_PREFIX}_alterAssetTags`, (data) => {
+        data.assetTags.scripts = data.assetTags.scripts.map(
+          (tag: HtmlTagObject) => this.processScriptTag(publicPath, compilation.assets, tag)
+        );
+        return data;
+      });
+
+      hooks.beforeEmit.tap(`${PLUGIN_PREFIX}_beforeEmit`, (data) => {
+        Object.keys(compilation.assets).forEach((assetName) => {
+          if (this.isFileNeedsToBeInlined(assetName)) {
+            delete compilation.assets[assetName];
+          }
+        });
+        return data;
+      });
+    });
+  }
+}
+
+export default HtmlInlineScriptPlugin;
diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1 @@
+export const PLUGIN_PREFIX = 'HtmlInlineScriptPlugin';
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,8 @@
+import htmlWebpackPlugin from 'html-webpack-plugin';
+import HtmlInlineScriptPlugin from './HtmlInlineScriptPlugin';
+
+const isHtmlWebpackPluginV4 = 'getHooks' in htmlWebpackPlugin;
+
+module.exports = isHtmlWebpackPluginV4
+  ? HtmlInlineScriptPlugin
+  : null;
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "declaration": true,
+    "module": "UMD",
+    "outDir": "./dist",
+    "downlevelIteration": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "./src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
