如何在不使用“需要”或“导入”的情况下导入NPM模块？ [英] How do I import an NPM module without using 'require' or 'import'?

问题描述

我知道这可能是一个非常普遍且得到广泛回答的问题。我之所以知道其中一个原因，是因为我花了最后3个小时弄清楚如何在我的项目中正确导入第三方库，而这不支持使用导入或需要。

最有可能是我最想念的东西，但我已经到了无法解决的地步，我为此感到愤怒。 p>

所以我的情况是ATM：

我目前正在研究基于下划线的wordpress主题。我依赖 https://www.npmjs.com/package/google-libphonenumber，但我不知道如何将其包含在文件中，并且我习惯于只能在node_modules中使用导入/请求的环境。

我已经读过Browserify可能是一个解决方案，并且我试图使它作为gulp的一部分工作，但最终我最终遇到的错误比以前更多的完全是乱码。

package.json

 依赖项：{
  @ 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，
 unescores-for-npm： ^ 1.0.0 
} 
  

导入测试

 从'libphonenumber-js'导入{getPhoneCode} ; 
 $ jq（function（）{
 console.log（getPhoneCode（'GB'））; 
} 
  

导致以下错误：

 语法错误：意外的令牌{
  

和

需要测试 >

  var lib = require（'libphonenumber-js'）; 
 $ jq（function（）{
 lib.isValidNumberForRegion（'23123412'，'GB'）
} 
  

以下错误：

 未捕获的ReferenceError：未定义require 
  

解决方案

从unpkg加载脚本

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

或通过本地安装

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

从e您可以将libphonenumber视为一个全局变量（在窗口对象中）

然后按照自述文件进行修改，但请稍作调整：

  //获取`PhoneNumberUtil`的实例。 
 // const phoneUtil = require（'google-libphonenumber'）。PhoneNumberUtil.getInstance（）; 
 const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance（）; 
 
 //使用国家/地区代码解析数字并保留原始输入。 
 const number = phoneUtil.parseAndKeepRawInput（'202-456-1414'，'US'）; 
 
 //打印手机的国家/地区代码。 
 console.log（number.getCountryCode（））; 
 // => 1 
 
 //打印手机的国家号码。 
 console.log（number.getNationalNumber（））; 
 // => 2024561414 
  

然后在浏览器控制台中查看 2024561414

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

解决方案

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

这篇关于如何在不使用“需要”或“导入”的情况下导入NPM模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！