将第三方js文件导入到Angular TypeScript项目中

2023-11-26

在我使用 Angular 的经历中,我被迫使用四种不同的方式来包含第 3 方库poliglot.js(对于多语言)。

所以能够使用new Polyglot(...)在我的朗课上:

export class Lang
{
    ...
    constructor() {

        this.polyglot = new Polyglot({ locale: 'en' });
        ...        
    }
    ...
}

我使用这四种方法

A.在我安静的老(2016)Angular2(基于框架angular2-webpack-启动器)项目(目前该解决方案由于缺乏require新角度项目的说明):

var Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');

B.在我的下一个项目 Angular4 中(基于angular2-webpack-启动器):

import Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js'; 

C.在我最近嵌入 Laravel 项目的 Angular 5 项目中(基于角度-cli)

import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';

D.我还找到了第四个解决方案,它适用于我的一些旧的 jQuery 角度项目(基于angular2-webpack-启动器)(互联网上的人们经常提到这个解决方案)但我使用多语言示例将其写下来:

import '../../../node_modules/node-polyglot/build/polyglot.min.js';
declare var Polyglot: any;

// declare var $:any   // this is for jquery (as example)

问题是:这四种解决方案有什么区别以及它们的工作原理?是什么原因导致在某些项目中一种解决方案有效但其他解决方案不起作用?


那么让我们来分解一下:

答:仍然可以在任何角度版本中使用,您只需在使用之前声明 require 即可。

declare const require: any;
const Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');

B:A点使用CommonJS模块系统加载依赖,其他点使用ES6动态导入系统(可以像commonjs模块系统一样使用webpack默认情况下)。如果库公开了模块,您可以直接导入 Polyglot

export class Polyglot {}

C:如果 Polyglot 有多个成员,而您都不想使用,则可以通过编写导入 Polyglot 的所有成员

import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';

D:导入 Polyglot,但未绑定到任何变量。但是 Polyglot 公开了一个全局对象,在声明该变量在其下可用之前,您无法访问该对象。

See the MDN 参考为了更好的解释

根据您使用的构建系统,没有答案哪一个应该始终有效,但我的解决方案 A 应该在每个 webpack 构建以及 B 和 C 中都有效。友情提醒,A 和 D 不是最佳解决方案,仅应在以下情况下使用没有其他方法可以导入/使用该模块。

编辑: 这ES6标准只是描述模块是什么,它包含什么,模块应该是什么样子exported and imported等等。

因此 ES6 无法处理这些“旧”模块,因为它不是一个库或类似的东西。CommonJS也只是一个标准,它是由 Node.js 实现的,您知道哪个模块导入require('module').

因此,Webpack 可以帮助您处理这两个模块系统,因为它们实现了这两个模块系统。

如果您创建一个空项目并通过 webpack 进行构建webpack --env development,您可以看到 webpack 如何处理不同的模块。 Webpack 编译您​​的代码并广告它自己对 ESModules 或 CommonJS Modules 的处理。根据他们找到的模块,他们将调用不同的方法。我添加了一个带有编译代码的示例。

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./main.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./esmodule.js":
/*!*********************!*\
  !*** ./esmodule.js ***!
  \*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar MyClass = function MyClass() {\n  _classCallCheck(this, MyClass);\n\n  console.log('test');\n};\n\nexports.default = MyClass;\n\n//# sourceURL=webpack:///./esmodule.js?");

/***/ }),

/***/ "./main.js":
/*!*****************!*\
  !*** ./main.js ***!
  \*****************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nvar test = _interopRequireWildcard(__webpack_require__(/*! ./esmodule.js */ \"./esmodule.js\"));\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }\n\n__webpack_require__(/*! ./module */ \"./module.js\");\n\n//# sourceURL=webpack:///./main.js?");

/***/ }),

/***/ "./module.js":
/*!*******************!*\
  !*** ./module.js ***!
  \*******************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nmodule.exports = {\n  myFunction: function myFunction() {\n    console.log('Test');\n  }\n};\n\n//# sourceURL=webpack:///./module.js?");

/***/ })

/******/ });

//// main.js
require('./module')
import * as test from './esmodule.js';
//// esmodule.js
export default class MyClass{
    constructor(){
        console.log('test')
    }
}
//// module.js
module.exports = {
    myFunction: function () {
        console.log('Test')
    }
}

您可以看到 Webpack 创建了一个自执行函数,该函数获取所有创建的模块及其{ id(pathToFile) : function(module, exports, __webpack_require__)。在 2 种不同的模块类型(ESModule、Module --> CommonJS)中,您可以看到 Webpack 对类型的处理方式不同。如果您想更深入地了解我可以再次编辑我的帖子。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将第三方js文件导入到Angular TypeScript项目中 的相关文章

  • 在 JavaScript 中计算不包括周末和节假日的天数

    我正在尝试编写一个代码 其中将计算总天数 不包括周末和自定义假期 我通过 stackoverflow 和 adobe 论坛进行搜索以找到解决方案 并提供了以下代码 如果公共假期恰逢工作日 周六至周三 则不计算在内 我的问题是 如果公共假期落
  • 应该使用encodeURI吗?

    javascript 的encodeURI 函数有任何有效用途吗 据我所知 当您尝试发出 HTTP 请求时 您应该 完整的 URI 您想要放入 URI 中的某些片段 可以是 unicode 字符串或 UTF 8 字节序列 在第一种情况下 显
  • 使用 jQuery live() 初始化插件?

    使用 jQuery 在特定类的所有当前和未来元素上自动初始化插件的最佳方法是什么 例如 假设我想要全部
  • 如何对像 Excel Pivot 这样两个键必须匹配的数组求和?

    我尝试对 Datum 和 Material 必须匹配的所有 Menge 和 Fehler 值求和 结果应类似于 Excel 数据透视表 到目前为止 这是我的代码 但我不知道如何添加也必须匹配的第二个键 Material 我希望你能理解我试图
  • 为什么人们将自己的自定义/用户函数添加到 jQuery 对象中? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我见过人们将自己的自定义 用户功能添加到jQuery目的 例如 myUserFunc function regular JS code 你为什么
  • AngularJS 服务并承诺最佳实践

    我有一个 AngularJS 应用程序services 调用 http资源并返回promise我在控制器中解决了这个问题 这是我正在做的事情的示例 app service Blog function http q var deferred
  • 如何将数据从 JavaScript 发送到 Python

    我正在 jinja2 和 python2 7 上使用 GAE 进行 Web 开发 我可以从Python获取数据 但我无法将数据从 JavaScript 发送到 Python 这是 JavaScript 代码 function toSave
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • Angular 2 Observable 具有多个订阅者

    我有一个 Angular 2 服务 可以从 API 获取数据 该服务有 3 个订阅者 在组件中定义 每个订阅者都对数据执行其他操作 不同的图表 我注意到我正在向 API 发出三个 GET 请求 而我想要实现的是一个请求 并且订阅者将共享数据
  • FileReader 在 Ionic 2 中未触发 onloadend

    我正在尝试使用 cordova file plugin 读取本地文件 目前我可以读取本地目录的内容并选择单个文件 但我在获取文件内容时遇到问题 这是我的函数 从列表中选择文件后单击按钮即可调用该函数 import window resolv
  • 测试 - 存根服务方法未定义

    我已经在非常简单的代码上编写了一个非常简单的测试 但由于某种原因存根服务方法未定义 当我使用 Jasmine Spy 时 它可以工作 但对于这样一个简单的任务 有人可以解释一下为什么会发生这种情况吗 我删除了 import 语句只是为了减少
  • 数字和文本列的垫排序问题

    我有角度材料数据源 角度材料版本是 5 0 3 排序正在进行中 但是对于某些列 它的排序不正确 那里有数字和文字 例如 排序结果如 XXX 1 1tesxt 1 OPD OXD 12
  • React setState回调返回值

    我是 React 新手 我希望实现这种流程 set the state execute a function f an async one which returns a promise set the state again return
  • 如何将类组件中的 props 发送到功能组件?

    我是 ReactJS 的初学者 需要知道如何将一个页面中的 props 值发送到另一个页面 道具位于第一页上我可以获取类组件值如何获取另一页中的值 提前致谢 墙色 jsx import React Component from react
  • 数据表 - 从 AJAX 源过滤数据

    我有一个数据表 正在从 api 获取数据 现在我的状态是活动的 非活动的 如果标志是活动的 那么我需要在数据表中显示 否则我不应该显示过期的 这是我的fiddle https jsfiddle net lakshmipriya001 qLp
  • 跟踪预防阻止了对 https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js 存储的访问

    大约一年半前 我使用 OfficeJS API 编写了一个 Excel 加载项 它一直工作到大约两周前 Excel 似乎已经进行了更新 现在我可以右键单击任务窗格并查看开发工具 而以前我无法做到这一点 并且必须运行外部 MS Edge 开发
  • mat-tab-group 不是 Angular 9 中的已知元素

    我正在使用 Angular 9 和 Angular Material 9 2 4 我正在尝试使用mat tab 组在我的 component html 中 但我不断收到错误 mat tab group is not a known elem
  • 使用 NodeJS 创建 YouTube 播放列表

    我正在尝试使用 NodeJS 服务器创建 YouTube 播放列表 我已按照 Oauth 的 NodeJS 快速入门说明进行操作 如以下链接所示 https github com youtube api samples blob maste
  • JS - 如何将图像对象变成灰度并显示它

    基本上 当单击按钮时 它会告诉移动设备转到相机 一旦相机拍照 它就会给我图像数据 它被称为数据 URL 吗 这是我处理它的代码 var imagesrc data image jpeg base64 imageData var myimag
  • 使用 CSP 防止自动点击链接 XSS 攻击

    当将 CSP 用于稍微不同的目的 沙箱 时 我意识到一个非常简单的自动点击链接似乎甚至可以绕过相对严格的 CSP 我所描述的内容如下 内容安全政策 default src none script src unsafe inline 还有身体

随机推荐

  • 为什么 UI 元素必须始终从 UI 线程创建/更新?

    为什么 UI 元素必须始终从 UI 线程创建 更新 在 几乎 所有编程语言中 UI 元素只能从 UI 线程安全地访问 修改 我知道这是一个标准的并发访问和同步问题 但真的有必要吗 这种行为是由编程语言还是操作系统强加的 有没有什么编程语言可
  • Django - 仅包含日期部分的分组

    MyModel objects filter created at gte 2011 03 09 created at lte 2011 03 11 values created at status annotate status coun
  • 作为 Cowboy 客户端,您如何使用 Gun?

    我跟着入门说明对于 Cowboy 我让 Cowboy 在端口 8080 上运行并侦听 然后我得到了Hello Erlang 当我进入时的回应http localhost 8080在我的浏览器中 现在 如何使用 Gun 连接到 Cowboy
  • 在类中,“using Base::BaseOfBase;”应该做什么?

    考虑这段代码 include
  • GWT 中的配置参数存储在哪里?

    我可以在客户端哪里存储配置参数 我无法在 Servlet init 参数 web xml 中存储参数 因为我必须使用 PHP 那么我如何在客户端存储初始化应用程序参数 例如 PHP 脚本位置 一些密码等 为此 您有以下选择 将数据存储在客户
  • 对数组进行排序并反映另一个数组中的变化

    我有一个双精度数组 用 Java 编写 arr1我想要排序 最有可能的第一个选项是实用方法Arrays sort double 我的想法是我想要相同的更改 例如 值index i与值互换index j in arr1 反映在另一个整数数组中
  • 如何更改 Flutter 中 EditText 上气泡(光标下)的颜色

    如何更改在 Text 或 TextFormField 或 Flutter 中选择文本时出现的气泡的颜色 Here是同样的问题 但是对于本机代码 根据这个颤振文档 textSelectionHandleColor已弃用 你应该使用select
  • Scala 对现有变量的多重赋值

    我可以做类似的事情 def f Tuple2 String Long val a b f 如果变量已经存在怎么办 我在过滤器上运行相同的数据集 但我不想链接它们 长名称等 这是我尝试过的 但它抱怨期待 而不是最后一行的 var a init
  • 为什么原型函数不影响console.log?

    我制作了原型Function这样它就有一个 getBody 函数 Function prototype getBody function Get content between first and last var m this toStr
  • 列表视图有多个分割按钮吗?

    基于 JQuery Mobile 的示例拆分按钮列表我正在尝试在 Android 中生成一个列表视图组件 右侧有两个额外的按钮 一个紧挨着另一个 问题在于该代码仅生成一个按钮 第二个按钮作为当前项目的链接添加 这是我的代码 ul li a
  • 什么是控制字符的正则表达式?

    我试图匹配 c 形式的控制字符 其中 c 是控制字符的任何有效字符 我有这个正则表达式 但它当前不起作用 z 我认为问题在于插入符 是正则表达式解析引擎的一部分 匹配以下形式的 ASCII 文本字符串 X使用模式 仅此而已 匹配以下形式的
  • 如何将自己从事件处理程序中删除?

    我想做的基本上是从事件中删除函数 而不知道函数的名称 我有一个FileSystemWatcher 如果创建 重命名文件 它会检查其名称 如果匹配 则会将其移动到特定位置 但是 如果文件被锁定 它会生成一个附加到计时器的滴答事件的 lambd
  • 通过 TCP 连接发送大文件

    我需要通过互联网将一些大文件发送到计算机 结果我打开了路由器上打算使用的端口并转发相应的IP地址 无论如何 让我向您展示我为了实现这一目标而一直在努力的课程 这些类对于小文件工作得很好 但有时对于大文件则失败 这是服务器的代码 它是一个控制
  • 如果 getc() 通过 SIGINT 退出,则 getc() 后面的未定义行为是否会改变程序行为

    根据 未定义行为 的现代解释 编译器有权假设不会发生导致未定义行为 不可避免 的事件链 并且可以消除仅适用于代码将要执行的情况的代码未定义的行为 这可能会导致未定义行为的影响及时倒退 并使本来可以观察到的行为无效 另一方面 如果除非程序终止
  • 使用 Windows 身份验证的 Intranet 应用程序是否需要 ASP.NET Core Identity

    在 Intranet Web 应用程序中使用 Windows 身份验证我想实现以下目标 从 AD 收集其他属性 姓名 员工编号 从数据库表中收集其他属性 工作时间 工资 根据应用程序角色 而不是 AD 组 进行授权 基于 AD 属性授权 有
  • Draw.io——是否有未缩小的源代码?

    我们正在尝试使用最新的 Draw io 存储库 并修改 javascript 客户端代码以更改其某些行为以改进用户体验 但是 我们能找到的唯一最新来源是这里 https github com jgraph draw io tree mast
  • fstream 读/写是否移动文件指针

    这是一个我希望能够轻松回答的简单问题 文件流读写操作是否会移动指针 举个例子 cpos 10000 for i 0 i lt 20 i dataFile seekg cpos i ios beg dataFile read carray i
  • 何时使用虚拟析构函数?

    我对大多数都有深入的了解OOP理论 但让我很困惑的一件事是虚拟析构函数 我认为无论如何 对于链中的每个对象 析构函数总是被调用 您打算什么时候将它们虚拟化 为什么 当您可能通过指向基类的指针删除派生类的实例时 虚拟析构函数非常有用 clas
  • ggvis 中带有数字的热图

    我正在尝试使用 ggvis 中 ggplot2 中的数字复制热图 ggplot2版本是 library ggplot2 hec lt as data frame xtabs Freq Hair Eye HairEyeColor ggplot
  • 将第三方js文件导入到Angular TypeScript项目中

    在我使用 Angular 的经历中 我被迫使用四种不同的方式来包含第 3 方库poliglot js 对于多语言 所以能够使用new Polyglot 在我的朗课上 export class Lang constructor this po