Галантерея: как совместить импорт и спрос в проекте

JavaScript

предисловие

посколькуjsВнеes6После этого все друзья с удовольствием использовали его в проекте.import,export default, но когда мы используемimportспособ представитьnpmПри использовании сторонних модулей вы обнаружите, чтоnpmБольшинство методов экспорта упаковки принятыcommonjsнормативныйrequire,module.exports. эта серединаbabelКак именно это обрабатывается? Я считаю, что многие мелкие партнеры имеют много знаков вопроса! Тогда давайте взглянем на тайну здесь!

module.exports перевод

module.exportsКак им пользоваться объяснять особо не буду, посмотритеbabelВ чем разница между предварительно скомпилированным и посткомпилированным кодом.

Содержимое исходного файла test.js:

exports.name = "test";

Содержимое test.js, скомпилированное babel:

"use strict";
exports.name = "test";

До и после компиляции код мало чем отличается, все равно следимcommonjsТехнические характеристики.

экспортировать перевод по умолчанию

оes6как использоватьexportМодуль экспорта здесь описываться не будет. Взгляните на следующий пример, см.es6изexportпроходя черезbabelКак это будет выглядеть после перевода:

Содержимое исходного файла test.js:

export var a = "test";
export default function(){
    console.log(1)
}

Содержимое test.js, скомпилированное babel:

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

exports.default = function () {
    console.log(1);
};

var a = exports.a = "test";

Из результатов видно, чтоbabelнапрямуюes6нормативныйexportскомпилировано вcommonjsнормативныйmodule.exports, и дастexportsобъект добавить__esModuleотметьте, чтобы указать, что этот объект является производным отes6изexportПеревернулся (конкретно что он делает, объясню позже).

импортировать и требовать

Два приведенных выше примера имеютexportа такжеmodule.exportsпроходя черезbabelПосле компиляции становитсяcommonjsнормативныйmodule.exports. Далее поговорим о том, в разных сценариях использоватьimportа такжеrequireпри импортеbabelкак это работает!

Сценарий 1: требуется импортировать модуль module.exports

Этот сценарий самый простой, так как оба следуютcommonjsТехнические характеристики. Рассмотрим следующий пример:test.js

module.exports = {
    name:"西瓜"
}

a.js

var a = require("./test");
console.log(a);

a.js, скомпилированный babel

"use strict";
var a = require("./test");
console.log(a);

console.log的值:{ name: '西瓜' }

Эта сцена не объяснена слишком много.

Сценарий 2: требуется импортировать модуль экспорта по умолчанию

Сценаes6а такжеcommonjsОдин из вариантов смешанного использования. Без лишних слов, давайте сразу к делу.test.js

export var a = "西瓜";

export default function(){
    console.log(1)
}

a.js

var a = require("./test");
console.log(a);

a.js, скомпилированный babel

"use strict";
var a = require("./test");
console.log(a);

console.log的值:{ default: [Function], a: '西瓜' }

Почему такой результат?Как упоминалось в приведенном выше случае,es6изexportмодульbabelПосле компиляции становитсяcommonjsизmodule.exports, так вотrequireимпортexport defaultМодуль, позже потребуется импортmodule.exportsМодуль такой же, как сцена 1.

Сценарий 3: Import Import Module.exports Модуль

Это самый смешанный сценарий, обычно, как фронтенд-разработчик, при написании бизнес-кода я предпочитаю использоватьes6автономныйexport defaultмодулей, при публикации вnpmСторонние пакеты скомпилированы, и большинство из них следуютcommonjsТехнические характеристики. Давайте посмотрим на эту ситуацию,babelКак это обрабатывается.

test.js

module.exports={
    name:"西瓜",
    age:"20"
}

a.js

import test from "./test";
console.log(test)

a.js, скомпилированный babel

"use strict";

var _test = require("./test");

var _test2 = _interopRequireDefault(_test);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_test2.default);

console.log的值:{ name: '西瓜', age: '20' }

Видно, что в этом сценарии еще один_interopRequireDefaultМетод оборачивает слой, и содержание метода также очень простое, судя по тому, существует ли входящий объект.__esModuleАтрибут, если он существует, возвращает исходный объект, если он не существует, ему присваивается атрибут по умолчанию нового объекта, а значение в console.log становится атрибутом по умолчанию;

Так почему это место делает это?
1.просить:Зачемconsole.logстанет _test2.default?
отвечать:дляes6изimportНапример, сimport xxx from 'xxx'Введенное таким образом значение является значением по умолчанию, экспортируемым целевым файлом, поэтому после компиляции здесьconsole.logЗначение становится_test2.default.
2.просить: Почему вы хотите судить о том, существует он или нет?__esModule?
отвечать: Я сказал в начале статьи, используйтеexport defaultэкспортированные модули, послеbabelПосле компиляции выдастexportsплюс один__esModuleсвойств, чтобы доказать, чтоes6Спецификация экспортируемых модулей. когда здесь__esModuleдляtrue, объект, указанныйes6нормативныйexportэкспорт, за счетes6изexportМожно использоватьexport defaultэкспортировать свойства по умолчанию, поэтому_interopRequireDefaultМетод возвращает исходный объект напрямую. когда__esModuleдляfalse, объект, указанныйcommonjsнормативныйmodule.exportsэкспорт, в данном случае, чтобы следоватьes6изimportправило введения,babelСтратегия во время компиляции состоит в том, чтобы сделать слой на внешнем слое входящего объекта.defaultОболочка назначения. Это гарантирует, что обаimportПравила импорта, а также экспортаmodule.exportsценность .

В заключение
В этом сценарии, наконец,console.logЗначениеmodule.exportsценность .

Сценарий 4: модуль импорта импорта экспорта по умолчанию

Этот сценарий не будет объясняться слишком много, оба следуютes6Технические характеристики, достаточно посмотреть документацию. хочу понять, что двое переживаютbabelДля скомпилированного эталонного отношения вы можете непосредственно увидеть третью сцену Я считаю, что после прочтения третьей сцены в сочетании с полным текстом вы сможете понять, о чем этот процесс.

расширять

Вот сценарий, то есть использоватьimport * as xxx from xxxТаким образом экспортировать все модули;
test.js

module.exports={
    name:"西瓜",
    age:"20"
}

a.js

import * as test from "./test";
console.log(test)

a.js, скомпилированный babel

"use strict";

var _test = require("./test");

var test = _interopRequireWildcard(_test);

function _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)) newObj[key] = obj[key]; 
            } 
        } 
        newObj.default = obj; return newObj; 
    } 
}

console.log(test);
console.log的值：{ name: '西瓜', age: '20', default: { name: '西瓜', age: '20' } }

При введении таким образомmodule.exportsмодуль, использовать_interopRequireWildcardэтот метод для решения. Добавил еще один объектdefaultсвойство смонтированоobj, роль и в сцене три_interopRequireDefaultМетод аналогичен, так что нет необходимости объяснять слишком много!

Суммировать

дляes6спецификация иcommonjsТехнические характеристики, послеbabelПосле компиляции он будет преобразован вcommonjsспецификации, а затем на этой основе использовать__esModuleдифференцируется, чтобы принадлежать кes6модуль илиcommonjsмодуль. и разрезать, чтобы обеспечитьes6Технические характеристикиimportправильность и единообразие импортируемых значений,babelТакже сделал несколько стратегий, чтобы справиться с различиями между двумя предыдущими.
Эта статья здесь, я надеюсь, что она может помочь моим друзьям!

Категории