Question

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

最有可能是我最想念的东西，但是我已经到了我无法找到解决办法的地步。

所以我的情况是ATM：

我目前正在研究建立在Understrap上的wordpress主题。我对https://www.npmjs.com/package/google-libphonenumber有依赖性，但是我不知道如何将其包含在文件中，并且我习惯于只能使用node_modules中的import / require的环境。

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

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 { getPhoneCode } from 'libphonenumber-js';
$jq(function(){
  console.log(getPhoneCode('GB'));
}

导致以下错误：

Uncaught SyntaxError: Unexpected token {

和

需要测试

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

导致以下错误：

Uncaught ReferenceError: require is not defined

Answer 1

从unpkg加载脚本

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

或通过本地安装

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

从那里您可以看到libphonenumber是一个全局的（在窗口对象中）

然后按照自述文件进行一些修改：

// 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

在浏览器控制台中查看“ 2024561414”

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

1 个答案: