meta: replace browserify with esbuild (#3363)

* meta: build bundle using esbuild

* meta: don't use terser to build minified bundle

* website: use esbuild instead of browserify

* remove disc and disc.html

* Update lock file

* Simplify inject script

* nits

* fix `yarn start`

babel.config.js

@@ -17,6 +17,7 @@ module.exports = (api) => {
         useBuiltIns: false, // Don't add polyfills automatically.
         // We can uncomment the following line if we start adding polyfills to the non-legacy dist files.
         // corejs: { version: '3.15', proposals: true },
+        modules: false,
       }],
     ],
     plugins: [

bin/build-bundle.js

@@ -1,136 +0,0 @@
-const fs = require('fs')
-const chalk = require('chalk')
-const babelify = require('babelify')
-const tinyify = require('tinyify')
-const browserify = require('browserify')
-const exorcist = require('exorcist')
-const glob = require('glob')
-const path = require('path')
-const { minify } = require('terser')
-const { transformFileAsync } = require('@babel/core')
-
-function handleErr (err) {
-  console.error(chalk.red('✗ Error:'), chalk.red(err.message))
-}
-
-// eslint-disable-next-line no-shadow
-function buildBundle (srcFile, bundleFile, { minify = false, standalone = '' } = {}) {
-  const b = browserify(srcFile, { debug: true, standalone })
-  if (minify) {
-    b.plugin(tinyify)
-  }
-  b.transform(babelify)
-  b.on('error', handleErr)
-
-  return new Promise((resolve) => {
-    b.bundle()
-      .pipe(exorcist(`${bundleFile}.map`))
-      .pipe(fs.createWriteStream(bundleFile), 'utf8')
-      .on('error', handleErr)
-      .on('finish', () => {
-        if (minify) {
-          console.info(chalk.green(`✓ Built Minified Bundle [${standalone}]:`), chalk.magenta(bundleFile))
-        } else {
-          console.info(chalk.green(`✓ Built Bundle [${standalone}]:`), chalk.magenta(bundleFile))
-        }
-        resolve([bundleFile, standalone])
-      })
-  })
-}
-async function minifyBundle ([bundleFile, standalone]) {
-  const minifiedFilePath = bundleFile.replace(/\.js$/, '.min.js')
-  const sourceMapPath = `${minifiedFilePath}.map`
-  const js = await fs.promises.readFile(bundleFile, 'utf-8')
-  const { code, map } = await minify(js, {
-    sourceMap: {
-      content: fs.readFileSync(`${bundleFile}.map`, 'utf-8'),
-      url:sourceMapPath,
-    },
-    toplevel: true,
-  })
-  return Promise.all([
-    fs.promises.writeFile(minifiedFilePath, code),
-    fs.promises.writeFile(sourceMapPath, map),
-  ])
-    .then(() => console.info(chalk.green(`✓ Built Minified Bundle [${standalone}]:`), chalk.magenta(minifiedFilePath)))
-}
-async function transpileDownForIE ([bundleFile, standalone]) {
-  const minifiedFilePath = bundleFile.replace(/\.js$/, '.min.js')
-  const sourceMapPath = `${minifiedFilePath}.map`
-  const { code: js, map: inputMap } = await transformFileAsync(bundleFile, {
-    compact: false,
-    highlightCode: false,
-    inputSourceMap: true,
-
-    browserslistEnv: 'legacy',
-    presets: [['@babel/preset-env',  {
-      loose: false,
-      targets: { ie:11 },
-      useBuiltIns: 'entry',
-      corejs: { version: '3.19', proposals: true },
-    }]],
-  })
-  const { code, map } = await minify(js, {
-    sourceMap: {
-      content: inputMap,
-      url: sourceMapPath,
-    },
-    toplevel: true,
-  })
-  return Promise.all([
-    fs.promises.writeFile(bundleFile, js),
-    fs.promises.writeFile(`${bundleFile}.map`, JSON.stringify(inputMap)),
-    fs.promises.writeFile(minifiedFilePath, code),
-    fs.promises.writeFile(sourceMapPath, map),
-  ]).then(() => {
-    console.info(chalk.green(`✓ Built Bundle [${standalone} (ES5)]:`), chalk.magenta(bundleFile))
-    console.info(chalk.green(`✓ Built Minified Bundle [${standalone} (ES5)]:`), chalk.magenta(minifiedFilePath))
-  })
-}
-
-fs.mkdirSync('./packages/uppy/dist', { recursive: true })
-fs.mkdirSync('./packages/@uppy/robodog/dist', { recursive: true })
-fs.mkdirSync('./packages/@uppy/locales/dist', { recursive: true })
-
-const methods = [
-  buildBundle(
-    './packages/uppy/index.js',
-    './packages/uppy/dist/uppy.js',
-    { standalone: 'Uppy' },
-  ).then(minifyBundle),
-  buildBundle(
-    './packages/uppy/bundle.js',
-    './packages/uppy/dist/uppy.legacy.js',
-    { standalone: 'Uppy (with polyfills)' },
-  ).then(transpileDownForIE),
-  buildBundle(
-    './packages/@uppy/robodog/bundle.js',
-    './packages/@uppy/robodog/dist/robodog.js',
-    { standalone: 'Robodog' },
-  ).then(minifyBundle),
-]
-
-// Build minified versions of all the locales
-const localePackagePath = path.join(__dirname, '..', 'packages', '@uppy', 'locales', 'src', '*.js')
-glob.sync(localePackagePath).forEach((localePath) => {
-  const localeName = path.basename(localePath, '.js')
-  methods.push(
-    buildBundle(
-      `./packages/@uppy/locales/src/${localeName}.js`,
-      `./packages/@uppy/locales/dist/${localeName}.min.js`,
-      { minify: true },
-    ),
-  )
-})
-
-// Add BUNDLE-README.MD
-methods.push(
-  fs.promises.copyFile(
-    `${__dirname}/../BUNDLE-README.md`,
-    `./packages/uppy/dist/README.md`,
-  ),
-)
-
-Promise.all(methods).then(() => {
-  console.info(chalk.yellow('✓ JS bundles 🎉'))
-})

bin/build-bundle.mjs

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import chalk from 'chalk'
+
+import esbuild from 'esbuild'
+import babel from 'esbuild-plugin-babel'
+
+const UPPY_ROOT = new URL('../', import.meta.url)
+const PACKAGES_ROOT = new URL('./packages/', UPPY_ROOT)
+
+function buildBundle (srcFile, bundleFile, { minify = true, standalone = '', plugins, target } = {}) {
+  return esbuild.build({
+    bundle: true,
+    sourcemap: true,
+    entryPoints: [srcFile],
+    outfile: bundleFile,
+    banner: {
+      js: '"use strict";',
+    },
+    minify,
+    plugins,
+    target,
+  }).then(() => {
+    if (minify) {
+      console.info(chalk.green(`✓ Built Minified Bundle [${standalone}]:`), chalk.magenta(bundleFile))
+    } else {
+      console.info(chalk.green(`✓ Built Bundle [${standalone}]:`), chalk.magenta(bundleFile))
+    }
+  })
+}
+
+await fs.mkdir(new URL('./uppy/dist', PACKAGES_ROOT), { recursive: true })
+await fs.mkdir(new URL('./@uppy/robodog/dist', PACKAGES_ROOT), { recursive: true })
+await fs.mkdir(new URL('./@uppy/locales/dist', PACKAGES_ROOT), { recursive: true })
+
+const methods = [
+  buildBundle(
+    './packages/uppy/index.js',
+    './packages/uppy/dist/uppy.min.js',
+    { standalone: 'Uppy' },
+  ),
+  buildBundle(
+    './packages/uppy/bundle.js',
+    './packages/uppy/dist/uppy.legacy.min.js',
+    {
+      standalone: 'Uppy (with polyfills)',
+      target: 'es5',
+      plugins:[babel({
+        config:{
+          compact: false,
+          highlightCode: false,
+          inputSourceMap: true,
+
+          browserslistEnv: 'legacy',
+          presets: [['@babel/preset-env',  {
+            loose: false,
+            targets: { ie:11 },
+            useBuiltIns: 'entry',
+            corejs: { version: '3.15', proposals: true },
+          }]],
+        },
+      })],
+    },
+  ),
+  buildBundle(
+    './packages/@uppy/robodog/bundle.js',
+    './packages/@uppy/robodog/dist/robodog.min.js',
+    { standalone: 'Robodog' },
+  ),
+]
+
+// Build minified versions of all the locales
+const localesModules = await fs.opendir(new URL('./@uppy/locales/src/', PACKAGES_ROOT))
+for await (const dirent of localesModules) {
+  if (!dirent.isDirectory() && dirent.name.endsWith('.js')) {
+    const localeName = path.basename(dirent.name, '.js')
+    methods.push(
+      buildBundle(
+        `./packages/@uppy/locales/src/${localeName}.js`,
+        `./packages/@uppy/locales/dist/${localeName}.min.js`,
+        { minify: true },
+      ),
+    )
+  }
+}
+
+// Add BUNDLE-README.MD
+methods.push(
+  fs.copyFile(
+    new URL('./BUNDLE-README.md', UPPY_ROOT),
+    new URL('./uppy/dist/README.md', PACKAGES_ROOT),
+  ),
+)
+
+Promise.all(methods).then(() => {
+  console.info(chalk.yellow('✓ JS bundles 🎉'))
+}, (err) => {
+  console.error(chalk.red('✗ Error:'), chalk.red(err.message))
+})

bin/build-lib.js

@@ -5,7 +5,6 @@ const glob = promisify(require('glob'))
 const fs = require('fs')
 const path = require('path')
 
-const transformFile = promisify(babel.transformFile)
 const { mkdir, stat, writeFile } = fs.promises
 
 const SOURCE = 'packages/{*,@uppy/*}/src/**/*.js'
@@ -52,7 +51,7 @@ async function buildLib () {
       }
     }
 
-    const { code, map } = await transformFile(file, { sourceMaps: true })
+    const { code, map } = await babel.transformFileAsync(file, { sourceMaps: true })
     await mkdir(path.dirname(libFile), { recursive: true })
     await Promise.all([
       writeFile(libFile, code),
@@ -66,6 +65,6 @@ async function buildLib () {
 console.log('Using Babel version:', require('@babel/core/package.json').version)
 
 buildLib().catch((err) => {
-  console.error(err.stack)
+  console.error(err)
   process.exit(1)
 })

bin/disc.js

@@ -1,44 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const { PassThrough } = require('stream')
-const replace = require('replacestream')
-const browserify = require('browserify')
-const babelify = require('babelify')
-const minify = require('minify-stream')
-const disc = require('disc')
-
-const outputPath = path.join(__dirname, '../website/src/disc.html')
-
-function minifyify (filename) {
-  if (filename.endsWith('.js')) {
-    return minify({
-      sourceMap: false,
-      toplevel: true,
-      compress: { unsafe: true },
-    })
-  }
-  return new PassThrough()
-}
-
-function prepend (text) {
-  const stream = new PassThrough()
-  stream.write(text)
-  return stream
-}
-
-const bundler = browserify(path.join(__dirname, '../packages/uppy/index.js'), {
-  fullPaths: true,
-  standalone: 'Uppy',
-})
-
-bundler.transform(babelify)
-bundler.transform(minifyify, { global: true })
-
-bundler.bundle()
-  .pipe(disc())
-  .pipe(prepend('---\nlayout: false\n---\n'))
-  .pipe(replace('http://', 'https://', { limit: 1 }))
-  .pipe(fs.createWriteStream(outputPath))
-  .on('error', (err) => {
-    throw err
-  })

package.json

@@ -54,20 +54,18 @@
     "@typescript-eslint/parser": "^5.0.0",
     "@uppy-dev/remark-lint-uppy": "workspace:*",
     "adm-zip": "^0.5.5",
-    "aliasify": "^2.1.0",
     "autoprefixer": "^10.2.6",
     "aws-sdk": "^2.1038.0",
     "babel-jest": "^27.0.6",
     "babel-plugin-inline-package-json": "^2.0.0",
-    "babelify": "^10.0.0",
-    "browserify": "^17.0.0",
     "chalk": "^4.1.1",
     "concat-stream": "^2.0.0",
     "core-js": "~3.19.3",
     "cssnano": "^5.0.6",
     "dedent": "^0.7.0",
     "deep-freeze": "^0.0.1",
-    "disc": "^1.3.3",
+    "esbuild": "^0.14.1",
+    "esbuild-plugin-babel": "^0.2.3",
     "eslint": "^8.0.0",
     "eslint-config-transloadit": "^2.0.0",
     "eslint-plugin-compat": "^4.0.0",
@@ -114,16 +112,12 @@
     "stylelint-scss": "^3.20.1",
     "tar": "^6.1.0",
     "temp-write": "^5.0.0",
-    "terser": "^5.7.0",
-    "tinyify": "^3.0.0",
     "tsd": "^0.17.0",
-    "tsify": "^5.0.1",
     "typescript": "~4.4",
-    "verdaccio": "^5.1.1",
-    "watchify": "^4.0.0"
+    "verdaccio": "^5.1.1"
   },
   "scripts": {
-    "build:bundle": "yarn node ./bin/build-bundle.js",
+    "build:bundle": "yarn node ./bin/build-bundle.mjs",
     "build:clean": "rm -rf packages/*/lib packages/@uppy/*/lib packages/*/dist packages/@uppy/*/dist",
     "build:companion": "yarn workspace @uppy/companion build",
     "build:css": "yarn node ./bin/build-css.js",
@@ -159,22 +153,23 @@
     "test": "npm-run-all lint test:locale-packs test:unit test:type test:companion",
     "uploadcdn": "yarn node ./bin/upload-to-cdn.js",
     "version": "yarn node ./bin/after-version-bump.js",
-    "watch:css": "onchange 'packages/**/*.scss' --initial --verbose -- yarn run build:css",
+    "watch:css": "onchange 'packages/{@uppy/,}*/src/*.scss' --initial --verbose -- yarn run build:css",
     "watch:js:bundle": "onchange 'packages/{@uppy/,}*/src/**/*.js' --initial --verbose -- yarn run build:bundle",
     "watch:js:lib": "onchange 'packages/{@uppy/,}*/src/**/*.js' --initial --verbose -- yarn run build:lib",
-    "watch": "npm-run-all --parallel watch:**",
+    "watch:js": "npm-run-all --parallel watch:js:bundle watch:js:lib",
+    "watch": "npm-run-all --parallel watch:css watch:js",
     "web:build-examples": "cd website && node build-examples.js",
-    "web:build": "npm-run-all web:inject-disc web:inject-bundles-misc web:generate web:build-examples web:inject-frontpagecodesample",
+    "web:build": "npm-run-all web:inject-bundles-misc web:generate web:build-examples web:inject-frontpagecodesample",
     "web:bundle-watch-inject": "onchange 'packages/uppy/dist/**/*.css' 'packages/uppy/dist/**/*.js' --initial --verbose -- yarn run web:inject-bundles-misc",
     "web:clean": "cd website && touch db.json && yarn run hexo clean",
     "web:prepare-deploy": "bash ./bin/prepare-web-deploy",
     "web:generate": "cd website && touch db.json && yarn run hexo generate",
     "web:inject-bundles-misc": "cd website && node inject.js",
-    "web:inject-disc": "yarn run build:lib && node ./bin/disc.js",
     "web:inject-frontpagecodesample": "yarn run web:generate && cp -f website/public/frontpage-code-sample.html website/themes/uppy/layout/partials/frontpage-code-sample.html && touch website/themes/uppy/layout/index.ejs",
-    "web:start": "npm-run-all build:lib --parallel watch:css web:watch-examples web:bundle-watch-inject web:watch",
-    "web:watch-examples": "cd website && node build-examples.js watch",
-    "web:watch": "cd website && touch db.json && yarn run hexo server"
+    "web:start-server": "cd website && touch db.json && node inject.js && node build-examples.js && yarn run hexo server",
+    "web:start": "yarn run web:start-server",
+    "web:watch-examples": "yarn run web:bundle-watch-inject && yarn run web:watch",
+    "web:watch": "npm-run-all build:lib --parallel watch:css web:watch-examples web:bundle-watch-inject web:start_server"
   },
   "jest": {
     "automock": false,
@@ -190,6 +185,6 @@
     "@types/redis": "2",
     "@types/eslint@^7.2.13": "^8.2.0",
     "npm-auth-to-token@1.0.0": "patch:npm-auth-to-token@npm:1.0.0#.yarn/patches/npm-auth-to-token-npm-1.0.0-c288ce201f",
-    "babel-plugin-transform-commonjs@1.1.6": "patch:babel-plugin-transform-commonjs@npm:1.1.6#.yarn/patches/babel-plugin-transform-commonjs-npm-1.1.6-0007fa2809"
+    "babel-plugin-transform-commonjs@2.1.6": "patch:babel-plugin-transform-commonjs@npm:1.1.6#.yarn/patches/babel-plugin-transform-commonjs-npm-1.1.6-0007fa2809"
   }
 }

website/build-examples.js

@@ -21,30 +21,15 @@
  * the Set when it has been bundled.
  */
 
-const { createWriteStream, mkdirSync } = require('fs')
 const { glob } = require('multi-glob')
 const chalk = require('chalk')
 const path = require('path')
 const notifier = require('node-notifier')
-const babelify = require('babelify')
-const aliasify = require('aliasify')
-const browserify = require('browserify')
-const watchify = require('watchify')
 
-const bresolve = require('browser-resolve')
+const esbuild = require('esbuild')
+const alias = require('esbuild-plugin-alias')
 
-function useSourcePackages (b) {
-  // eslint-disable-next-line no-underscore-dangle
-  b._bresolve = (id, opts, cb) => {
-    bresolve(id, opts, (err, result, pkg) => {
-      if (err) return cb(err)
-      if (/packages\/@uppy\/[^/]+?\/lib\//.test(result)) {
-        result = result.replace(/packages\/@uppy\/([^/]+?)\/lib\//, 'packages/@uppy/$1/src/')
-      }
-      cb(err, result, pkg)
-    })
-  }
-}
+const babelImport = import('esbuild-plugin-babel')
 
 const webRoot = __dirname
 
@@ -53,11 +38,6 @@ let dstPattern = `${webRoot}/public/examples/**/app.js`
 
 const watchifyEnabled = process.argv[2] === 'watch'
 
-const browserifyPlugins = [useSourcePackages]
-if (watchifyEnabled) {
-  browserifyPlugins.push(watchify)
-}
-
 // Instead of 'watch', build-examples.js can also take a path as cli argument.
 // In this case we'll only bundle the specified path/pattern
 if (!watchifyEnabled && process.argv.length > 2) {
@@ -72,70 +52,32 @@ glob(srcPattern, (err, files) => {
     console.log('--> Watching examples..')
   }
 
-  const muted = new Set()
-
-  // Create a new watchify instance for each file.
   files.forEach((file) => {
-    const b = browserify(file, {
-      cache: {},
-      packageCache: {},
-      debug: true,
-      plugin: browserifyPlugins,
-    })
-
-    // Aliasing for using `require('uppy')`, etc.
-    b
-      .transform(babelify, {
-        root: path.join(__dirname, '..'),
-      })
-      .transform(aliasify, {
-        aliases: {
-          '@uppy': `./${path.relative(process.cwd(), path.join(__dirname, '../packages/@uppy'))}`,
-        },
-      })
-
-    // Listeners for changes, errors, and completion.
-    b
-      .on('update', bundle)
-      .on('error', onError)
-      .on('file', (file) => {
-        // When file completes, unmute it.
-        muted.delete(file)
-      })
-
-    // Call bundle() manually to start watch processes.
-    bundle()
-
-    /**
-     * Creates bundle and writes it to static and public folders.
-     * Changes to
-     *
-     * @param  {string[]} ids
-     */
-    function bundle (ids = []) {
-      ids.forEach((id) => {
-        if (!muted.has(id)) {
-          console.info(chalk.cyan('change:'), path.relative(process.cwd(), id))
-          muted.add(id)
-        }
-      })
-
-      const exampleName = path.basename(path.dirname(file))
-      const output = dstPattern.replace('**', exampleName)
-      const parentDir = path.dirname(output)
-
-      mkdirSync(parentDir, { recursive: true })
-
-      console.info(chalk.grey(`⏳ building: ${path.relative(process.cwd(), file)}`))
-
-      b
-        .bundle()
-        .on('error', onError)
-        .pipe(createWriteStream(output))
-        .on('finish', () => {
-          console.info(chalk.green(`✓ built: ${path.relative(process.cwd(), file)}`))
-        })
-    }
+    const exampleName = path.basename(path.dirname(file))
+    const outfile = dstPattern.replace('**', exampleName)
+
+    babelImport.then(({ default: babel }) => esbuild.build({
+      bundle: true,
+      sourcemap: true,
+      watch: watchifyEnabled,
+      entryPoints: [file],
+      outfile,
+      banner: {
+        js: '"use strict";',
+      },
+      loader: {
+        '.es6': 'js',
+      },
+      plugins: [
+        alias({
+          '@uppy': path.resolve(__dirname, `../packages/@uppy`),
+        }),
+        babel({
+          filter: /\.(es6|js)$/,
+          config: { root: path.join(__dirname, '..') },
+        }),
+      ],
+    })).catch(onError)
   })
 })
 
@@ -151,7 +93,7 @@ function onError (err) {
     title: 'Build failed:',
     message: err.message,
   })
-  this.emit('end')
+  this?.emit?.('end')
 
   // When running without watch, process.exit(1) on error
   if (!watchifyEnabled) {

website/inject.js

@@ -4,13 +4,11 @@ const chalk = require('chalk')
 const { spawn } = require('child_process')
 const readline = require('readline')
 const YAML = require('js-yaml')
-const { promisify } = require('util')
 const gzipSize = require('gzip-size')
 const prettierBytes = require('@transloadit/prettier-bytes')
-const browserify = require('browserify')
+const esbuild = require('esbuild')
 const touch = require('touch')
 const glob = require('glob')
-const { minify } = require('terser')
 
 const webRoot = __dirname
 const uppyRoot = path.join(__dirname, '../packages/uppy')
@@ -80,21 +78,23 @@ inject().catch((err) => {
 })
 
 async function getMinifiedSize (pkg, name) {
-  const b = browserify(pkg)
-
   const packageJSON = fs.readFileSync(path.join(pkg, 'package.json'))
-  const { version } = JSON.parse(packageJSON)
+  // eslint-disable-next-line no-shadow
+  const { main, version } = JSON.parse(packageJSON)
 
+  const external = excludes[name] ?? []
   if (name !== '@uppy/core' && name !== 'uppy') {
-    b.exclude('@uppy/core')
-    // Already unconditionally included through @uppy/core
-    b.exclude('preact')
-  }
-  if (excludes[name]) {
-    b.exclude(excludes[name])
+    // Preact is already unconditionally included through @uppy/core
+    external.unshift('@uppy/core', 'preact')
   }
 
-  const { code:bundle } = await promisify(b.bundle).call(b).then(buf => minify(buf.toString(), { toplevel: true }))
+  const { outputFiles:[{ contents: bundle }] } = await esbuild.build({
+    write: false,
+    bundle: true,
+    entryPoints: [path.resolve(pkg, main)],
+    minify: true,
+    external,
+  })
   const gzipped = await gzipSize(bundle)
 
   return {

website/package.json

@@ -6,18 +6,17 @@
     "version": "4.2.1"
   },
   "devDependencies": {
+    "@aduh95/hexo-renderer-postcss": "^3.0.0",
     "@babel/core": "^7.4.4",
-    "@goto-bus-stop/hexo-renderer-postcss": "^2.0.0",
     "@octokit/rest": "16.43.1",
     "@transloadit/prettier-bytes": "0.0.7",
-    "aliasify": "^2.1.0",
     "autoprefixer": "^10.2.6",
-    "babelify": "^10.0.0",
-    "browser-resolve": "2.0.0",
-    "browserify": "^17.0.0",
     "chalk": "2.4.2",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.6",
     "drag-drop": "^4.2.0",
+    "esbuild": "^0.14.3",
+    "esbuild-plugin-alias": "^0.2.1",
+    "esbuild-plugin-babel": "^0.2.3",
     "glob": "^7.2.0",
     "gzip-size": "5.1.1",
     "he": "^1.2.0",
@@ -42,12 +41,10 @@
     "mdast-util-inject": "1.1.0",
     "multi-glob": "^1.0.2",
     "node-notifier": "^8.0.1",
-    "postcss-inline-svg": "^3.1.1",
+    "postcss-inline-svg": "^5.0.0",
     "prismjs": "^1.17.1",
     "sass": "^1.29.0",
-    "terser": "^5.7.0",
-    "touch": "3.1.0",
-    "watchify": "^4.0.0"
+    "touch": "3.1.0"
   },
   "scripts": {
     "hexo": "hexo"

website/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     'postcss-inline-svg': {
-      path: 'src/images',
+      paths: ['src/images'],
     },
     cssnano: { safe: true },
   },