如何在不使用“需要”或“导入”的情况下导入NPM模块？

Question

I know this is probably a very common and widely answered question. One of the reasons I know it, is because i've spent the last 3 hours figuring out how I shall be importing 3rd party libraries properly in my project which does not support the use of 'import' or 'require'.

It is most likely something very fundamental that i'm missing, but I have reached the point where i'm literally steaming with anger from not being able to find a solution.

So my case ATM:

I am currently working on a wordpress theme built on understrap. I have a dependency on https://www.npmjs.com/package/google-libphonenumber but I have no idea how to include it in my file, and I'm used to working in environments where i can just use import/require from node_modules.

I've read that Browserify could be a solution and i've tried to make it work as a part of gulp, but I eventually just ended up with even more errors than before that were completely gibberish.

package.json

"dependencies": {
    "@babel/preset-env": "^7.4.5",
    "bootstrap": "^4.3.1",
    "browser-sync": "^2.26.7",
    "css-element-queries": "^1.2.0",
    "del": "^4.1.0",
    "font-awesome": "^4.7.0",
    "gulp": "^3.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-ignore": "^2.0.2",
    "gulp-imagemin": "^5.0.3",
    "gulp-minify": "^3.1.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-rimraf": "^0.2.2",
    "gulp-sass": "^3.0.2",
    "gulp-sequence": "^1.0.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1",
    "javascript-detect-element-resize": "^0.5.3",
    "jquery": "^3.4.1",
    "libphonenumber-js": "^1.7.21",
    "run-sequence": "^2.2.1",
    "undescores-for-npm": "^1.0.0"
  }

import test

import { getPhoneCode } from 'libphonenumber-js';
$jq(function(){
  console.log(getPhoneCode('GB'));
}

Resulting in the following error:

Uncaught SyntaxError: Unexpected token {

and

require test

var lib = require('libphonenumber-js');
$jq(function(){
  lib.isValidNumberForRegion('23123412', 'GB')
}

Resulting in the following error:

Uncaught ReferenceError: require is not defined

Answer 1

Load the script from unpkg

<script src="https://unpkg.com/google-libphonenumber@latest"></script>

or from a local install

<script src="node_modules/google-libphonenumber/dist/libphonenumber.js"></script>

From there you could see the libphonenumber as a global (in the window object)

Then follow the readme, but adapt it a bit:

// Get an instance of `PhoneNumberUtil`.
//const phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance();
const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();

// Parse number with country code and keep raw input.
const number = phoneUtil.parseAndKeepRawInput('202-456-1414', 'US');

// Print the phone's country code.
console.log(number.getCountryCode());
// => 1

// Print the phone's national number.
console.log(number.getNationalNumber());
// => 2024561414

And see '2024561414' in your browser console