Итак, давайте разберем это:
A: Все равно будет работать в любой угловой версии, которую вы просто должны объявить 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 предоставляет глобальный объект, к которому у вас нет доступа, пока вы не объявите переменную, в которой он будет доступен.
См. Справку mdn для лучшего объяснения
В зависимости от того, какую систему сборки вы используете, нет ответа, какой из них должен работать всегда, но мое решение A должно работать в каждой сборке веб-пакетов, а также B и C. Дружеское напоминание, что A и D не являются оптимальными решениями и должны использоваться толькоесли нет другого способа импортировать / использовать модуль.
Редактировать: Стандарт *1022* стандарта *1022* просто описывает, что такое модуль, что он содержит, как модуль должен быть экспортирован и импортировано и более на.
Так что ES6 не справится с этими "старыми" модулями, поскольку это не библиотека или что-то в этом роде. CommonJS также является просто стандартом, который реализован Node.js, модуль которого импортирует, как вы знаете, с помощью require('module').
Таким образом, вам поможет Webpack, который может работать с обеими этими модульными системами.потому что они реализовали оба из них.
Если вы создадите пустой проект и соберете его с помощью веб-пакета через webpack --env development, вы увидите, как веб-пакет обрабатывает различные модули.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__).В двух разных типах модулей (ESModule, Module -> CommonJS) вы можете видеть, что Webpack обрабатывает типы по-разному.Если вам нужен более глубокий взгляд, я могу снова отредактировать свой пост.