在我的角度体验中，我被迫使用四种不同的方式来包括第三方库poliglot.js（对于multilang）。
所以能够在我的Lang类中使用new Polyglot(...)：
export class Lang
{
...
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
我使用这四种方法
A。在我很老的（2016）angular2（基于framerwork angular2-webpack-starter）项目中（目前这个解决方案由于缺少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。我最近在Laravel项目中嵌入的angular5项目（基于angular-cli）
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
D。我还发现了第4个解决方案，该解决方案适用于我的jQuery旧角度项目（基于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)
问题是：这四种解决方案之间的区别是什么？是什么原因导致某个项目的解决方案有效，但其他解决方案无效？
答案 0 :(得分：5)
所以让我们分解一下：
A：仍然可以在您只需要在使用前声明require的任何角度版本中工作。
declare const require: any;
const Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');
B：点A使用CommonJS模块系统来加载依赖关系，其他点使用ES6动态导入系统（默认情况下，可以像使用webpack的commonjs模块系统那样使用它）。如果该库公开了模块，例如，您可以直接导入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并不是最佳解决方案，应该仅如果没有其他方法可以导入/使用该模块，则可以使用。
编辑： ES6 standard仅描述模块是什么，模块包含什么，模块应如何exported和imported等等。
因此，ES6不是库或类似的东西，因此无法处理ES6。 CommonJS只是一个标准，由Node.js实现，该模块使用require('module')导入您知道的模块。
因此，Webpack可以帮助您处理这两个模块系统，因为它们实现了这两个模块。
如果您创建一个空项目并通过webpack --env development使用webpack进行构建，则可以看到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，模块-> CommonJS）中，您可以看到Webpack处理不同的类型。如果您想更深入地了解，我可以再次编辑我的帖子。