How to Integrate LWC with Modern JavaScript Tools

chartExample.html

		<template>
		  <lightning-card title="Sales Chart">
			<canvas class="chart" lwc:dom="manual"></canvas>
		  </lightning-card>
		</template>
		

chartExample.js

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import ChartJS from '@salesforce/resourceUrl/ChartJS';

export default class ChartExample extends LightningElement {
  chart;
  chartJsInitialized = false;

  renderedCallback() {
    if (this.chartJsInitialized) {
      return;
    }
    this.chartJsInitialized = true;

    Promise.all([loadScript(this, ChartJS)])
      .then(() => {
        const ctx = this.template.querySelector('canvas').getContext('2d');
        this.chart = new window.Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['Jan', 'Feb', 'Mar'],
            datasets: [{
              label: 'Revenue',
              data: [100, 200, 300],
              backgroundColor: 'rgba(54, 162, 235, 0.6)'
            }]
          }
        });
      })
      .catch(error => {
        console.error('Error loading ChartJS', error);
      });
  }
}

momentExample.js

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import MomentJS from '@salesforce/resourceUrl/MomentJS';

export default class MomentExample extends LightningElement {
  @track formattedDate;
  momentInitialized = false;

  renderedCallback() {
    if (this.momentInitialized) return;
    this.momentInitialized = true;

    loadScript(this, MomentJS)
      .then(() => {
        this.formattedDate = window.moment().format('MMMM Do YYYY, h:mm:ss a');
      })
      .catch(error => {
        console.error('Moment.js load failed', error);
      });
  }
}

momentExample.html

<template>
  <lightning-card title="Current Date & Time">
    <p>{formattedDate}</p>
  </lightning-card>
</template>

lodashExample.js

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import Lodash from '@salesforce/resourceUrl/Lodash';

export default class LodashExample extends LightningElement {
  @track maxValue;
  lodashInitialized = false;

  renderedCallback() {
    if (this.lodashInitialized) return;
    this.lodashInitialized = true;

    loadScript(this, Lodash)
      .then(() => {
        const values = [1, 3, 5, 7, 9];
        this.maxValue = window._.max(values);
      })
      .catch(error => {
        console.error('Lodash load error', error);
      });
  }
}

lodashExample.html

<template>
  <lightning-card title="Max Value Using Lodash">
    <p>Max Value: {maxValue}</p>
  </lightning-card>
</template>