将第三方 js 文件导入 angular typescript 项目
Import third party js files to angular typescript project
在我 angular 的经验中，我被迫使用四种不同的方式来包含第 3 方库 poliglot.js（对于多语言）。
所以能够在我的 Lang class:
中使用 new Polyglot(...)
export class Lang
{
...
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
我用这四种方法
A. 在我相当老的 (2016) angular2（基于 framerwork angular2-webpack-starter）项目中（目前这个解决方案不起作用，因为在新 angular 项目中缺少 require 说明）：
var Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');
B. 在我的下一个项目中 angular4（基于 angular2-webpack-starter）：
import Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
C. 在我最近的 angular5 项目中嵌入了 Laravel 项目（基于 angular-cli）
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
D. 我还找到了第 4 个解决方案，它适用于我的 jQuery 的一些旧 angular 项目（基于 angular2-webpack-starter )（互联网上的人经常提到这个解决方案）但我用 Polyglot 示例将其写下来：
import '../../../node_modules/node-polyglot/build/polyglot.min.js';
declare var Polyglot: any;
// declare var $:any // this is for jquery (as example)
问题是：这四种解决方案有什么区别，它们是如何工作的？是什么原因导致在某些项目中一种解决方案有效而其他解决方案无效？
所以让我们分解一下：
A：仍然可以在任何 angular 版本中使用，你只需要在使用它之前声明 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 公开了一个全局对象，在您声明它在其下可用的变量之前，您无权访问该对象。
请参阅 mdn reference 以获得更好的解释
根据您使用的构建系统，没有答案哪一个应该始终有效，但我的解决方案 A 应该适用于每个 webpack 构建以及 B 和 C。友情提醒，A 和 D 不是最佳解决方案，并且只有在没有其他方法 import/use 模块时才应使用。
编辑：
ES6 standard just describes what a modules is, what it contains, how a module should be exported and imported 等等。
所以 ES6 无法处理这些 "old" 模块，因为它不是库或类似的东西。 CommonJS 也只是一个标准，由 Node.js 实现，你知道哪个模块导入 require('module')。
所以 Webpack 可以帮助您处理这两个模块系统，因为它们实现了这两个模块系统。
如果您创建一个空项目并通过 webpack --env development 使用 webpack 构建，您可以看到 webpack 如何处理不同的模块。 Webpack 会编译你的代码，并为 ESModules 或 CommonJS 模块提供它自己处理的广告。根据他们找到的模块，他们将调用不同的方法。我添加了一个带有编译代码的示例。
/******/ (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 以不同的方式处理这些类型。如果您想要更深入的了解，我可以再次编辑我的 post。
在我 angular 的经验中，我被迫使用四种不同的方式来包含第 3 方库 poliglot.js（对于多语言）。
所以能够在我的 Lang class:
中使用new Polyglot(...)
export class Lang
{
...
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
我用这四种方法
A. 在我相当老的 (2016) angular2（基于 framerwork angular2-webpack-starter）项目中（目前这个解决方案不起作用，因为在新 angular 项目中缺少 require 说明）：
var Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');
B. 在我的下一个项目中 angular4（基于 angular2-webpack-starter）：
import Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
C. 在我最近的 angular5 项目中嵌入了 Laravel 项目（基于 angular-cli）
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
D. 我还找到了第 4 个解决方案，它适用于我的 jQuery 的一些旧 angular 项目（基于 angular2-webpack-starter )（互联网上的人经常提到这个解决方案）但我用 Polyglot 示例将其写下来：
import '../../../node_modules/node-polyglot/build/polyglot.min.js';
declare var Polyglot: any;
// declare var $:any // this is for jquery (as example)
问题是：这四种解决方案有什么区别，它们是如何工作的？是什么原因导致在某些项目中一种解决方案有效而其他解决方案无效？
所以让我们分解一下：
A：仍然可以在任何 angular 版本中使用，你只需要在使用它之前声明 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 公开了一个全局对象，在您声明它在其下可用的变量之前，您无权访问该对象。
请参阅 mdn reference 以获得更好的解释
根据您使用的构建系统，没有答案哪一个应该始终有效，但我的解决方案 A 应该适用于每个 webpack 构建以及 B 和 C。友情提醒，A 和 D 不是最佳解决方案，并且只有在没有其他方法 import/use 模块时才应使用。
编辑： ES6 standard just describes what a modules is, what it contains, how a module should be exported and imported 等等。
所以 ES6 无法处理这些 "old" 模块，因为它不是库或类似的东西。 CommonJS 也只是一个标准，由 Node.js 实现，你知道哪个模块导入 require('module')。
所以 Webpack 可以帮助您处理这两个模块系统，因为它们实现了这两个模块系统。
如果您创建一个空项目并通过 webpack --env development 使用 webpack 构建，您可以看到 webpack 如何处理不同的模块。 Webpack 会编译你的代码，并为 ESModules 或 CommonJS 模块提供它自己处理的广告。根据他们找到的模块，他们将调用不同的方法。我添加了一个带有编译代码的示例。
/******/ (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 以不同的方式处理这些类型。如果您想要更深入的了解，我可以再次编辑我的 post。