Немного понимания import и require

JavaScript

основная концепция

require используется для чтения и выполнения файлов js и возвращает объект экспорта модуля.Если модуль не указан, будет сообщено об ошибке. Node использует спецификацию модуля CommonJS, а спецификация CommonJS для загрузки модулейСинхронизировать, последующие операции можно выполнять только после завершения загрузки.

import используется для импорта функций, объектов или примитивных типов из внешних модулей, других скриптов и т. д. import — это команда ES6. Она отличается от require. Она генерирует ссылку на внешний модуль вместо загрузки модуля. Она не загружает значение в модуль до тех пор, пока модуль не будет фактически использован.

статическая компиляция и динамическая компиляция

требуется динамическая компиляция

Когда модуль загружается в первый раз, Node кэширует модуль, а последующие загрузки получают его из кэша.

требуетсявызов во время выполнения, поэтому require теоретически можно использовать в любом месте кода.

//example.js
module.exports = {
    say: 'hi'
}

//main.js
require('./example').say = 'hello'
const test = require('./example').say
console.log(test)       //hello

Приведенный выше тест повторно представляет пример, но его атрибут say все еще находится выше.hello, указывая на то, что модуль-пример не перезагружен, а получен из кеша, поэтому атрибут say неhi

импортировать статическую компиляцию

Компиляция модулей ES6: при импорте модуля он только генерирует ссылку и ждет, пока она понадобится для получения значения, поэтому проблемы с кэшированием нет, а переменные в модуле привязаны к модулю, в котором он находится.

Импортвызывается во время компиляции, хотя команда импорта имеет эффект подъема и будет поднята в голову всего модуля, рекомендуется ставить ее в начало файла.

// base.js
export var foo = 'bar';
setTimeout(() => foo = 'baz change', 500);

// main.js
import { foo } from './base';
console.log(foo); // bar
setTimeout(() => console.log(foo), 600);// baz changed

Как видно из приведенного выше кода, значение foo, полученное дважды, отличается, поскольку import загружается динамически, вы можете восприниматьbase.jsизменения в .

Такой дизайн может повысить эффективность компилятора, но нет способа добиться загрузки во время выполнения.

Поскольку require загружается во время выполнения, команда импорта не может заменить функцию динамической загрузки require.

Импорт вводится для достижения динамической нагрузкиimport()функция, которая возвращает объект обещания.


import(`./xxxx.js`)
  .then(module => {
    ...
  })
  .catch(err => {
    ...
  });

Однако на этом пути есть проблема: модуль может быть вызван до того, как он будет загружен, и вызов в это время завершится ошибкой.

// base.js
export var fish;

setTimeout(() => fish = 'fish', 500);


// main.js
import { fish } from './base';

console.log(fish); //undefined

Транскодирование Babel для импорта

Поскольку текущий браузер не полностью поддерживает импорт, нам нужно перекодировать import в require через babel.

// es6Test.js
import * as actions from './searchAccount.actions';
import kdbTheme from '../../../common/Dialog/panguTheme.css';
import { createCommonAccount } from './createDialog.actions';

console.log('createCommonAccount###', createCommonAccount);
// babel编译es6Test.js
/* import * as actions from './searchAccount.actions' */
var _searchAccount = require('./searchAccount.actions'); 

var actions = _interopRequireWildcard(_searchAccount);

/* import kdbTheme from '../../../common/Dialog/panguTheme.css' */
var _panguTheme = require('../../../common/Dialog/panguTheme.css');

var _panguTheme2 = _interopRequireDefault(_panguTheme);

/* import { createCommonAccount } from './createDialog.actions'*/
var _createDialog = require('./createDialog.actions');

console.log('createCommonAccount###', _createDialog.createCommonAccount);

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; 
    } 
}

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

об использовании обоих

require

  1. требуют: функция для импорта модулей

  2. module.exports: переменная для экспорта модулей

module.exports = ...

exports.xxx = ...

const xxx = require('/xxx')
const {xxx1, xxx2, xxx3} = require('/xxx')

import

  1. импорт: импорт

  2. экспорт: экспорт

import xxx from '/xxx'

import * as xxx from '/xxx'

import {xxx1, xxx2, xxx3} from '/xxx'

export xxx

export {xxx1, xxx2, xxx3}

export default xxx
Категории