定义web组件的时候如何引用第三方库？

Question

class dryCard extends HTMLElement {
  
  constructor(){
    super();
    // 这里如何引用第三方库？
    // 我不想引用全局的库，我怕他没帮我引用，或者版本对不上。
  }

};

window.customElements.define('dry-card', dryCard);

Answer 1

let module = await import('https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-esm-min.min.js');
console.log(module)

或者

import('https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-esm-min.min.js')
      .then(module => {
        console.log(module)
      })
      .catch(err => {
        console.log(err)
      });

Answer 2

楼上的dynamic import是一种方案，如果环境支持require(比如Webpack)，还可以用require

class dryCard extends HTMLElement {
  
  constructor(){
    super();
    const a = require('xxx');
  }

};