Vite 构建想要保留注释

366 阅读1分钟

Vite构建想要保留注释,奈何这样的配置不生效:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: './lib/main.js',
      name: 'Counter',
      fileName: 'counter'
    },
    terserOptions: {
      compress: false,
      mangle: false,
      format: {
        comments: 'all'
      }
    },
    minify: 'terser'
  }
})
// package.json
{
  "name": "vite-build-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "./dist/counter.umd.cjs",
  "module": "./dist/counter.js",
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/counter.js",
    "require": "./dist/counter.umd.cjs"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "terser": "^5.31.6",
    "vite": "^5.2.10"
  }
}

去查看terser的文档配置terser.org/docs/option…

  • comments (default "some") -- by default it keeps JSDoc-style comments that contain "@license", "@copyright", "@preserve" or start with !, pass true or "all" to preserve all comments, false to omit comments in the output, a regular expression string (e.g. /^!/) or a function.

但设置comments: true并不生效,然后尝试在函数上面的注释加上@preserve,结果生效了。

// main.js
/**
 * 这是counter
 * @preserve
 * @param element
 */
export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(++counter))
  setCounter(0)
}

构建后的代码:

// dist/counter.js
/**
 * 这是counter
 * @preserve
 * @param element
 */
function setupCounter(element) {
  let counter = 0;
  const setCounter = (count) => {
    counter = count;
    element.innerHTML = `count is ${counter}`;
  };
  element.addEventListener("click", () => setCounter(++counter));
  setCounter(0);
}
export {
  setupCounter
};

vite.config.js不改配置了,使用原来的,估计很少人这么用吧:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: './lib/main.js',
      name: 'Counter',
      fileName: 'counter'
    },
    // terserOptions: {
    //   compress: false,
    //   mangle: false,
    //   format: {
    //     comments: 'all'
    //   }
    // },
    // minify: 'terser'
  }
})

comments: 'all'不生效这是terser的问题:github.com/terser/ters…