編譯 Lit bundle js

package.json

{
  "name": "lit-bundle-build",
  "type": "module",
  "scripts": {
    "build": "rollup -c"
  },
  "dependencies": {
    "lit": "^3.3.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^28.0.6",
    "@rollup/plugin-node-resolve": "^16.0.1",
    "@rollup/plugin-terser": "^0.4.4",
    "rollup": "^4.44.1"
  }
}

rollup.config.js

import { defineConfig } from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default defineConfig({
  input: 'entry-bundle.js',
  output: {
    file: 'dist/lit-all.bundle.js',
    format: 'esm',
    sourcemap: false,
    plugins:[terser({
      format:{
        comments:false
      }
    })]    
  },
  plugins: [
    resolve({ browser: true, exportConditions: ['default', 'module'] }),
    commonjs(),
    terser(),
  ],
  treeshake: true
});

entry-bundle.js

export { LitElement, html, css, svg } from 'lit';
export {  customElement,  property,  state,  query,  queryAll,  eventOptions} from 'lit/decorators.js';

編譯指令

npm install lit
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup\plugin-terser
npm run build

import

import { LitElement, css, html } from './lit-all.bundle.js'
import { customElement } from './lit-all.bundle.js'