Модульный модуль в Es6, импорт (импорт) экспорт (экспорт)

внешний интерфейс ECMAScript 6

предисловие

Если вы хотите улучшить качество чтения, нажмите на ссылкуМодульный модуль в Es6, импорт (импорт), экспорт (экспорт)

До Es6 в javascript не было модульной системы, он не мог разбить большую программу на несколько маленьких файлов, которые зависят друг от друга, а потом собрать их простым способом.Для достижения модульности, до Es6, AMD (Асинхронный модуль определение) и CMD (общее определение модуля)

Типичным представителем первого является requireJS (сделано иностранцами), а второго — seajs (отечественное).

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

разница: способ определения модуля и механизм загрузки модуля отличаются,Прежний AMD (requirejs) заключается в том, чтобы загружать все файлы одновременно и вводить их одновременно, и соблюдать предварительную зависимость, то есть при определении модуля вы должны сначала объявить модуль, от которого он зависит, а модуль будет выполняться сразу после загрузки модуля (загружается во время выполнения)

а такжеCMD (seajs) подчеркивает, что один файл и один модуль могут быть введены по запросу, а зависимости находятся рядом.После загрузки модуля он не будет выполняться сразу, а будет выполняться, когда встретится оператор require. .

Механизм использования и загрузки этих двух различен, что приводит к тому, что модуль AMD (requirejs) будет выполняться заранее, пользовательский опыт хороший, а производительность CMD (seajs) хорошая, потому что он выполняется только при необходимости, на стороне сервера nodejs использует спецификацию cmd, то есть какой пакет нужен, какой пакет вводится и добавляется по мере необходимости (загружается во время компиляции)

Введение модульной функции в спецификацию языка Es6 хорошо заменило предыдущие спецификации commonjs и AMD и стало распространенным модульным решением для браузеров и серверов.В современных фреймворках, таких как vuejs, ReactJS. Был введен Es6, и то же самое верно в некоторых автоматизированных инструментах упаковки webpack или мини-играх WeChat.

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

Текст начинается здесь~

Что такое модуль?

Введение переменных определения let и const в Es6 предназначено для решения проблемы глобальной области доступа к переменным, тем самым вводя область видимости на уровне блоков, разрешая конфликты имен, глобальное загрязнение одного и того же имени, безопасность и другие проблемы.

модульМогуПод функцией понимается блок функционального кода, представляющий собой код javascript, который инкапсулирует свойства и методы объекта.Это может быть один файл, переменная или функция,

В модулях Es6, независимо от того, добавлено ли «использовать строгий», строгий режим принимается автоматически, а переменные, созданные в верхней части модуля, не добавляются автоматически в глобальную область.Эта переменная существует только в области верхнего уровня модуля. модуль, и модули должны экспортировать некоторые элементы, к которым может получить доступ внешний код, такие как переменные или функции, а также модули могут импортировать привязки из других модулей.

Существует небольшая связь между функциями и областью действия между модулями (например, каждый файл в апплете WeChat или небольшой игре — это отдельный модуль, и переменные или функции, определенные в этом файле, работают только в этом файле), но также очень важно. Важно, в верхней части модуля значение this не определено. Кроме того, модуль не поддерживает комментарии кода в стиле HTML

Модули, по сути, имеют низкую связанность и высокую связность для разделения бизнес-логики, что также удобно для управления кодом вместо того, чтобы складывать все функциональные коды вместе.Настоящая магия модулей заключается в том, чтобы экспортировать и импортировать только те привязки, которые вам нужны, а не все. в одном файле

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

Экспорт и импорт модулей в Node

В модуле Node принята спецификация commonjs, то есть модуль импортируется с помощью метода require, а интерфейс экспортируется с помощью module.exports.В узле, например, следующий код example.js, конечно, вы также можно определить значение атрибута снаружи. , в качестве примера сохраните следующий код в скрипте

/*
*  通过module.exports将数据进行对外暴露
*/
module.exports = {
      name:"随笔川迹",
      funA:function(){
         return `我是${this.name}`
      }
}
// 或者把变量函数值定义在外面,例如,与上面等价,以下是常见写法
var name = "随笔川迹";
var funA = function(){
   return `我是${name}`
}
module.exports = {
  name:name,  // 至于前面的变量名可以任意,但是在另外一模块中引入时要与该变量名保持一致,否则就会报错,也可以只写一个name
  funA:funA  // 也可以只写一个funA

А в другом файле с именем requireExample.js используйте метод require для импорта

/*
*
*  通过require()的方式将外部模块引入
* 

*/
var  m =  require("./requireExample.js");
console.log(m.name);  // 随笔川迹 
console.log(m.funA()); // 我是随笔川迹

Результат выполнения показан на следующем рисунке

image
Приведенный выше код находится в узле,Общие методы, такие как переменные объекты и функции, доступны извне через module.exports, а локальные модули или импортированные пакеты вводятся через require().

этоmodule.exports — это свойство частной глобальной переменной, предоставляемое узлом, и require также является частным глобальным методом, предоставляемым узлом., то в модуле Es6 метод модуля require import в узле не используется

В апплете WeChat синтаксис экспорта и импорта модулей экспорта и импорта в Es6 в настоящее время не поддерживается.Он по-прежнему использует метод module.exports для предоставления данных внешнему миру, аналогичный node, и метод require для импорта данных Проверьте, я перешел с Es5 на Es6 в инструментах разработчика WeChat и использовал модульность в Es6, но сообщение об ошибке все равно будет.

Примечание. Можно импортировать внешний wxss путем импорта в апплете, но синтаксис модуля экспорта и импорта в Es6 поддерживается в мини-игре WeChat.

Далее небольшой игровой тест: использование экспорта и импорта в Es6, но, к сожалению, метод записи модулей в Es6 в апплете пока не поддерживается, а внешние данные по-прежнему выставляются в виде модуля , Использование аналогичного узла [ошибка загрузки изображения... (image-f6ee80-1533184743362)]

Как определить поддержку node.js для Es6

Глобальная установка в терминале командной строкиes-checker

npm install -g es-checker

После установки выполните команду es-checker в командной строке

es-checker

В терминале командной строки будет результат поддержки Es6 в этой версии узла: как показано на рисунке ниже, красный цвет означает, что он пока не поддерживается.


image

Еще один способ обнаружить Es6 — протестировать в среде repl узла, если он его не поддерживает, он сообщит об ошибке, если он работает нормально, значит, он поддерживает запись Es6.

Другой метод обнаружения: обратитесь к официальному документу Es6 для поддержки Node или браузера для конкретной таблицы совместимости Ecmascript6 (Смотреть Kaxiu.GitHub.IO/com pat-Он изначально был…), WeChat не поддерживает доступ к внешним ссылкам, вы можете напрямую скопировать сайт в браузер для доступа

Базовый синтаксис экспорта модуля в Es6

Экспорт модулей, ключевое слово экспорта используется для предоставления данных и предоставления их другим модулям.

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

Сохраните следующие js в exportExample.js и экспортируйте данные, функции и классы соответственно.

/*
* 
* @authors 随笔川迹 (itclanCode@163.com) 
* @date    2018-07-07 18:01:23
* @desc:导出数据
* */


// 导出数据
export var  name = "随笔川迹"; // 导出暴露name变量
export let  weChatPublic = "itclanCoder"; // 暴露weChatPublic
export const time = 2018; // 暴露time


// 导出函数
export function sum(num1,num2){
     return num1+num2;
}
/*
*
* 以上等价于
* function sum(num1,num2){
*    return num1+num2;
* }
* export sum;
* 
*/

// 导出类
export class People{
     constructor(name,age){
        this.name = name;
        this.age = age;
     }
     info(){
        return `${this.name}${this.age}岁了`;
     }
}

Если приведенный выше код разделен

1. Чтобы экспортировать данные, добавьте ключевое слово экспорта перед переменной.

export var  name = "随笔川迹";
export let  weChatPublic = "itclanCoder";
export const time = 2018;
// 上面的等价于下面的写法,以下这种是常见写法

var name = "随笔川迹";
let weChatPublic = "itclanCoder";
const time = 2018;

export {name,weChatPublic,time}

2. Чтобы экспортировать функцию, добавьте ключевое слово экспорта перед функцией.

export function sum(num1,num2){
     return num1+num2;
}

Можно сделать и так: не экспортируется сразу при определении, так как не всегда нужно экспортировать декларацию, ссылку можно экспортировать, поэтому следующий код тоже можно запустить

function sum(num1,num2){
      return num1+num2;
}
// 之后将其导出
export sum;

Примечание: Модуль является независимым файлом. Все переменные внутри файла не могут быть получены извне. Точно так же любые переменные, функции или классы, которые не экспортируются, являются частными для модуля. Если они не отображаются при экспорте, к ним нельзя получить доступ из модуль Примеры внешнего доступа:

function countResult(num1,num2){
      return num1-num2;
}
// 没有通过export关键字导出,在外部是无法访问该模块的变量或者函数的

3. Чтобы экспортировать класс, добавьте ключевое слово экспорта перед классом.

export class People{
     constructor(name,age){
        this.name = name;
        this.age = age;
     }
     info(){
        return `${this.name}${this.age}`
     }
}

Соответствующий импорт через импорт в другом модуле выглядит следующим образом, модуль называется importExample.js

/*
*
* @desc:从exportExample模块中导入数据,通过import的方式
* @说明:由于我在node环境中测试,因为node暂且不支持Es6中的module语法,所以得先把es6代码通过babel转化成Es5代码,方可在node环境中执行该脚本,from后面具体路径引入的应该是通过Es6转化为Es5的代码
* 

*/

import { name, weChatPublic,time,sum,People} from "../modelTest1/exportExampleEs5.js"

var people = new People("小美",18); // 实例化perople对象
console.log(name);
console.log(weChatPublic);
console.log(time);
console.log(sum(1,2));
console.log(people.info());

Примечание 1:В приведенном выше примере, за исключением ключевого слова export, каждое объявление точно такое же, как и в сценарии, потому что объявления экспортируемых функций и классов должны иметь имя, поэтому каждая функция или класс в коде также имеют это имя, если вы не используйте ключевое слово по умолчанию, иначе вы не сможете использовать этот синтаксис для экспорта анонимных функций или классов

ПримечаниеЗначение 2: поскольку в среде текущей версии узла синтаксис экспорта и импорта напрямую не поддерживается, то есть в среде узла непосредственное написание кода модуля Es6 и выполнение сценариев js с узлом вызовет ошибки, поэтому вы должны сначала Преобразуйте версию кода Es6 в Es5, а затем запустите скрипт в среде узла, не сообщая об ошибке. Этот метод преобразования можно преобразовать с помощью babel.

Установите babel следующим образом: Установите babel-cli глобально через npm в терминале командной строки.

npm install --global babel-cli
npm install --save babel-preset-es2015

Затем создайте новый файл конфигурации .babelrc в текущем каталоге, обратите внимание, что место хранения не содержит китайский путь, иначе при использовании команды babel будет выброшена ошибка

{
 "presets":["es2015"]
}

После написания кода es6 передайте исходный сценарий babel Es6 -o сценарий Es5, где -o или --out-file относится к выходному файлу Es5, сгенерированному в результате преобразования стандартного формата Es6.


image

Давайте сравним: на самом деле после того, как экспорт в Es6 в node компилируется babel, код в Es5 экспортируется в виде экспортов, а модуль import import в Es6 компилируется babel и импортируется путем преобразования в require:

Следующее сравнение показывает: код экспортного модуля экспорта в Es6

/*
* 
* @authors 随笔川迹 (itclanCode@163.com) 
* @date    2018-07-07 18:01:23
* @desc:导出数据
* */


// 导出数据
export var  name = "随笔川迹"; // 导出暴露name变量
export let  weChatPublic = "itclanCoder"; // 暴露weChatPublic
export const time = 2018; // 暴露time


// 导出函数
export function sum(num1,num2){
     return num1+num2;
}
/*
*
* 以上等价于
* function sum(num1,num2){
*    return num1+num2;
* }
* export sum;
* 
*/
function multiply(num1,num2){
   return num1+num2;
}
export multiply;
// 导出类
export class People{
     constructor(name,age){
        this.name = name;
        this.age = age;
     }
     info(){
        return `${this.name}${this.age}岁了`;
     }
}

Преобразован в код Es5 компиляцией babel

"use strict";

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

var _createClass = function() {
   function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i];
           descriptor.enumerable = descriptor.enumerable || false;
           descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true;
           Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.sum = sum;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/*
* 
* @authors 随笔川迹 (itclanCode@163.com) 
* @date    2018-07-07 18:01:23
* @desc:导出数据
* */

// 导出数据
var name = exports.name = "随笔川迹"; // 导出暴露name变量
var weChatPublic = exports.weChatPublic = "itclanCoder"; // 暴露weChatPublic
var time = exports.time = 2018; // 暴露time
var flag = true;



// 导出函数
function sum(num1, num2) {
   return num1 + num2;
}
/*
*
* 以上等价于
* function sum(num1,num2){
*    return num1+num2;
* }
* export sum;
* 
*/

// 导出类

var People = exports.People = function() {
   function People(name, age) {
       _classCallCheck(this, People);

       this.name = name;
       this.age = age;
   }

   _createClass(People, [{
       key: "info",
       value: function info() {
           return "" + this.name + this.age + "\u5C81\u4E86";
       }
   }]);

   return People;
}();

А в importExample.js в другом модуле вот код модуля импорта импорта в Es6

/*
*
* @desc:从exportExample模块中导入数据,通过import的方式
* 

*/

import { name, weChatPublic,time,sum,People} from "../modelTest1/exportExampleEs5.js"

var people = new People("小美",18); // 实例化perople对象
console.log(name);
console.log(weChatPublic);
console.log(time);
console.log(sum(1,2));
console.log(people.info());

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

"use strict";

var _exportExampleEs = require("../modelTest1/exportExampleEs5.js");

var people = new _exportExampleEs.People("小美", 18); // 实例化perople对象
/*
*
* @desc:从exportExample模块中导入数据,通过import的方式
* 

*/

console.log(_exportExampleEs.name);
console.log(_exportExampleEs.weChatPublic);
console.log(_exportExampleEs.time);
console.log((0, _exportExampleEs.sum)(1, 2));
console.log(people.info());

Базовый синтаксис импорта модуля в Es6

Если вы хотите получить доступ к функциям другого файла (модуля) из одного файла (модуля), вам необходимо импортировать данные в другой модуль с помощью ключевого слова import.Две части оператора импорта: идентификатор для импорта и идентификатор Он должен быть импортирован из этого модуля. Кроме того, порядок импортируемых идентификаторов может быть любым, но импортированные идентификаторы (то есть переменные в фигурных скобках) должны соответствовать именам переменных, отображаемым при экспорте. написание следующее:

import {identifer1,indentifer2}  from "./example.js"  // import {标识符1,标识符2} from "本地模块路径"

Двойные фигурные скобки после импорта указывают на привязку, импортированную из модуля, указанного позже, ключевое слово from указывает, из какого модуля импортируется данная привязка, а модуль определяется строкой, представляющей путь к модулю (называемой спецификатором модуля)., если в браузере формат пути такой же, как и у элемента

Примечание: в nodejs существует различие между добавлением префикса и отсутствием префикса.Пакет без префикса пути указывает на пакет, а префикс пути указывает на локальный файл, например: require("http") представляет пакет, а require("./http.js") представляет локальный файл

Уведомление: список привязок импорта похож на деструктуризацию объектов, но это не одно и то же.

При импорте привязки из модуля она действует так, как если бы она была определена с помощью const,То есть по умолчанию автоматически используется строгий режим, и вы не можете определить другую переменную с тем же именем (в том числе импортировать другую привязку с тем же именем), а также вы не можете использовать идентификатор или изменить значение привязки перед оператором импорта.
1. Импорт одной привязки
Предполагая, что предыдущий пример находится в модуле с именем ExportExample.js, мы можем импортировать и использовать привязки в этом модуле несколькими способами, импортируя только один идентификатор: например:

// 只导入一个
 import {sum} from "./example.js"

 console.log(sum(1,2));  // 3
 sum = 1; // 抛出一个错误,是不能对导入的绑定变量对象进行改写操作的

Хотя ExportExample.js экспортирует более одной функции, в этом примере импортируется только функция sum().Если вы попытаетесь присвоить сумме новое значение, будет выдана ошибка.Поскольку невозможно переназначить импортированные привязки. Для совместимости с несколькими браузерами и средами Nodejs обязательно включите /, ./ или ../ перед строкой, чтобы указать файл для импорта.
2. Импорт нескольких привязок

Если вы хотите импортировать несколько привязок из примера модуля, аналогично одной привязке, разделите несколько значений привязки запятыми.

// 导入多个
import {sum,multiply,time} from "./exportExample.js"
console.log(sum(1,2)); // 3
console.log(multiply(1,2)); // 3
console.log(time);  // 2018

В этом коде после импорта 3 привязок из модуля exportExample.js функции суммирования, умножения и времени используют их так, как если бы они были определены локально. Эквивалентно этому:Независимо от того, сколько раз модуль записывается в операторе импорта, модуль будет выполнен только один раз.После выполнения кода импортированного модуля экземпляр модуля сохраняется в памяти., его можно использовать повторно, если его использует другой оператор импорта.

import {sum} from "./exportExample.js"
import {multiply} from "./exportExample.js"
import {time} from "./exportExample.js

3. Импортируйте весь модуль в Es6

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

// 导入一整个模块
import * as example from "./exportExample.js"
console.log(example.sum(1,example.time));
consoole.log(example.multiply(1,2));// multiply与sum函数功能一样

В приведенном выше коде все привязки, экспортированные из файла exportExample.js нативного модуля, загружаются в объект с именем example, указанный для экспорта функции sum(), функцииmulti() и времени спустя при доступе к свойствам примера, этот формат импорта называется импортом пространства имен, так как пример объекта не существует в файле exportExample.js, он создается как объект пространства имен для всех экспортируемых элементов в файле exportExample.js.

Ограничения синтаксиса модуля в Es6

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

if(flag){
     export flag; // 语法错误
}

Об этом свидетельствует тест в мини-играх WeChat.


image

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

Оператор экспорта не может появляться в операторе if и не может быть экспортирован ни условно, ни динамически, то есть команда экспорта указывает внешний интерфейс и должна устанавливать однозначное соответствие с переменными. внутри модуля. Это нельзя записать так: export 5; или var num = 5; export num; должно быть заключено в фигурные скобки {имя переменной}, чтобы открыть его. статически определить, что можно экспортировать, поэтому только в верхней части модуля используйте экспорт

Точно так же import нельзя использовать в операторе, его можно использовать только вверху (именно поэтому многим платформам необходимо импортировать любые подключаемые модули перед кодом бизнес-логики), как показано в следующем коде, оператор импорта не может быть помещен в один в предложении

function testImport(){
     import flag  from "./ExportExample.js"   // 语法错误
 }

Проверьте возможность проверки в мини-игре WeChat ниже

image
По той же причине,Привязку нельзя импортировать или экспортировать динамически, а ключевые слова экспорта и импорта предназначены для статики.Конкретное различие между вышеуказанным методом импорта модуля через импорт и методом записи require заключается в том, что:

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

** Введено использование require. Если вы хотите быть более эффективным, то рекомендуется метод импорта **

Пример 1: Импортировать полностью глобально, без фигурных скобок, импортировать Element из библиотеки element-ui, естественно, в vue нужно прописать Vue.use (название плагина) глобально

import Element from 'element-ui';
Vue.use(Element);

Пример 2: Импортируйте две кнопки, выберите компоненты из библиотеки element-ui

import { Button, Select } from 'element-ui
Vue.use(Button);
Vue.use(Select);

Как переименовывать идентификаторы при импорте и экспорте в Es6

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

Как использовать: используйте ключевое слово as, чтобы указать, какая переменная, функция или класс должны вызываться вне модуля. Например, следующая функция

function sum(num1,num2){
    return num1+num2;
}

export {sum as add} // as后面是重新指定的函数名

В приведенном выше коде функция sum является локальным именем, а add — это имя, используемое при экспорте.Другими словами, когда другой модуль хочет импортировать эту функцию, необходимо использовать имя add.

Если в модуле importExample.js вместо суммы должен быть добавлен импортируемый переменный объект, который определяется переменным объектом при его экспорте

import  {add} from "./exportExample.js"

Ключевое слово as также можно использовать, если модуль хочет импортировать функцию с другим именем.

import {add as sum} from "./exportExample.js"
console.log(sum(1,2)); // 3
console.log(typeof add); // undefined

В приведенном выше коде используется имя импорта для переименования функции суммы при импорте функции добавления. Обратите внимание на разницу между этой записью и предыдущим экспортом. При использовании метода импорта переименованный идентификатор находится впереди, а за as следует локальное имя, но это Таким образом, даже если локальное имя функции изменяется при импорте, даже если модуль импортирует функцию добавления, в текущем модуле нет идентификатора add(). Вышеупомянутое обнаружение типа для добавления хорошая проверка.

Примечание: при импорте привязок в Es6 переменные нельзя изменить при импорте определений.

Оператор import в Es6 предназначен для переменных, функций и классов, созданных для привязки импортируемых объектов только для чтения, а не просто для ссылки на исходную привязку, как обычные переменные.Идентификатор может быть изменен только в экспортируемом модуле (т.е. , его можно изменить только в модуле экспорта), когда связанный модуль импортируется, он не может изменить связанное значение (импортированная связанная переменная не может быть изменена в импорте), передняя часть from является объектом переменной привязки, например : как показано в следующем коде

import {name,setName}  from "./exportExample.js"  // from前面双大括号中的变量对象是不可以被修改的,想尝试修改就会报错

console.log(name);  // 随笔川迹,此时访问name是全局变量
setName("好好先生");
console.log(name);  // 好好先生,函数内的同名变量会覆盖全局变量
name = "itclanCoder"  // 抛出错误,此处的name并非导入时name
image

При попытке изменить имя объекта переменной при импорте выдает ошибку


image

Приведенный выше код: при вызове setName("Mr. Good") он вернется к модулю, который экспортировал setName() для выполнения, и задаст имя Mr. Good. Идентификатор имени, импортированный через импорт, является идентификатором имени при экспорте экспортируется имя

Суммировать

Эта статья в основном посвящена тому, что такое модуль, экспорту и импорту модулей в Node, как определить поддержку node.js для Es6 и как преобразовать код es6 в код Es5 в Node через Babel для выполнения в Node, модуль экспорт (экспорт данных), функции и классы) импорт модулей (одиночный импорт, множественный импорт, импорт целиком)

В модуле при экспорте объекта для отображения с помощью ключевого слова export и импорте выставленного объекта с помощью ключевого слова import импортированный объект переменной должен соответствовать экспортируемому.Конечно, его также можно переименовать с помощью ключевого слова as , и переменная, импортируемая модулем Объект не может быть перезаписан.Если вы хотите переписать его, вам нужно переписать его в модуле, который экспортирует выставленный объект.

В модульных проектах очень распространена практика экспорта и импорта из модулей.Если вы не указываете экспортируемые идентификаторы (переменные, функции, классы), вы можете указать одну переменную, функцию или класс, экспортировав ключевое слово по умолчанию. детали будущего, продолжайте обращать внимание

Модульная обработка очень важна в будущих стандартах.Почему вы видите код сгенерированный скаффолдингом в первый раз,экспорт и импорт файлов,какой-то непонятный и непонятный,потому что добавляется модульное знание в Es6,и AMD Будь то сравнение или CMD, есть некоторые отличия.Я новичок, делаю заметки о своем опыте обучения.Если в статье есть какое-либо вводящее в заблуждение место, я приветствую дополнительные комментарии и исправления от проходящих учителей.


Добро пожаловать в публичный аккаунт WeChat itclanCoder.jpg

Если вы хотите улучшить качество чтения, нажмите на ссылкуМодульный модуль в Es6, импорт (импорт), экспорт (экспорт)