Освоение модулей JS: бесшовная интеграция нескольких модулей вместе
Мы рассмотрим модули CommonJS и ES и их использование в Node.js и браузере. Мы также обсудим, как использовать эти модули во внешнем интерфейсе с Webpack и как интегрировать модули CommonJS в модули ES.
Примеры, упомянутые в статье, собраны здесь:
⚡️ Stackblitz: https://stackblitz.com/edit/github-nofjl9-czkj4a
Репозиторий Github: https://github.com/rahuljain936/JS-modules
Существует два основных типа модулей JavaScript: CommonJS и ES6. Модули CommonJS — это традиционный формат модулей, используемый в Node.js, а модули ES6 — это более новый формат модулей, представленный в ECMAScript6.
Модули CommonJS
Модули CommonJS — это формат модулей, который в основном используется в Node.js. Вот пример модуля CommonJS и его использования:
// myModule.cjs
function myFunction() {
console.log("CommonJS module Demo");
}
module.exports = myFunction;
// index.js
const myFunction = require("./myModule.cjs");
myFunction(); // logs "CommonJS module Demo"
Хотя модули CommonJS хорошо работают в Node.js, они имеют некоторые ограничения при использовании в браузере. Одно из основных ограничений заключается в том, что модули CommonJS загружаются синхронно, что может блокировать выполнение других скриптов на странице.
ES-модули
Модули ES (модули ECMAScript) — это новый формат модулей, который поддерживается всеми современными веб-браузерами и Node.js. Вот пример модуля ES и его использования:
// myModule.mjs
export function myFunction() {
console.log("ES6 Module Demo");
}
// index.js
import { myFunction } from "./myModule.mjs";
myFunction();
Модули ES имеют некоторые преимущества перед модулями CommonJS. Одним из основных преимуществ является то, что модули ES по умолчанию загружаются асинхронно, что позволяет другим сценариям на странице продолжать выполнение во время загрузки модуля.
Однако модули ES не поддерживаются некоторыми устаревшими браузерами, и для обеспечения совместимости между браузерами вам может потребоваться использовать сборщик модулей, например Webpack или Rollup.
См. модули ES6 Таблица совместимости браузеров для получения дополнительной информации.
Использование модулей ES с Webpack
Чтобы использовать модули ES с Webpack, вам необходимо использовать ключевые слова import и export в коде JavaScript. Однако, поскольку не все устаревшие браузеры изначально поддерживают модули ES, вам также необходимо использовать подключаемый модуль Webpack под названием babel-loader для преобразования ваших модулей ES в JavaScript, который может быть понят всеми версиями браузера.
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
В приведенном выше примере мы добавили новое свойство module в наш файл конфигурации Webpack, который определяет массив rules. Массив rules указывает, что любые файлы JavaScript, оканчивающиеся на .js, должны транспилироваться с использованием подключаемого модуля babel-loader, за исключением каталога node_modules. Пресет @babel/preset-env используется для переноса модулей ES в JavaScript, который может быть понят всеми версиями браузеров.
Использование модулей CommonJS внутри модулей ES
Разработчики JavaScript могут оказаться в ситуации, когда им нужно использовать модуль CommonJS внутри модуля ES. Хотя это не рекомендуемый подход, в некоторых случаях он может быть необходим. В этом разделе будут рассмотрены различные подходы к импорту и использованию модулей CommonJS внутри модулей ES.
NodeJs: используйте оператор импорта, чтобы использовать модули CommonJS внутри модуля ES.
Используйте оператор импорта для использования модулей CommonJS внутри модуля ES.
// myModule.cjs
module.exports.myFunction = function() {
console.log('CommonJS Module in ES6 Node module');
}
// index.js
import { myFunction } from "./myModule.cjs";
myFunction();
Браузер
В браузере нет встроенной поддержки синтаксиса CommonJS `require` и `exports`, поэтому мы не можем использовать его напрямую. Однако мы по-прежнему можем использовать Webpack для объединения модуля CommonJS в формат, который можно использовать в браузере.
// package.json
{
"name": "es6-cjs-browser",
"version": "1.0.0",
"main": "dist/main.js",
"scripts": {
"start": "webpack && python3 -m http.server 1111"
},
"type": "module"
}
// myModule.cjs
module.exports.myFunction = function() {
return 'CommonJS module in ES6 browser module';
}
// index.js
import { myFunction } from './myModule.cjs';
function component() {
const element = document.createElement("div");
element.innerHTML += myFunction();
return element;
}
document.body.appendChild(component());
После запуска webpack в каталоге dist будет создан файл main.js. Этот файл можно использовать как модуль ES6 внутри тега сценария HTML для запуска в браузере.
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Browser ES6 Module demo</title>
</head>
<body>
<script src="../dist/main.js"></script>
</body>
</html>
Заключение
Модули JavaScript — это мощный инструмент для организации и модуляции вашего кода. Они позволяют писать код, который легче поддерживать, тестировать и использовать повторно.
Существует несколько различных типов модулей JavaScript, включая модули CommonJS и модули ES. Модули CommonJS используются в Node.js, а модули ES — в браузере. Однако с помощью сборщиков модулей, таких как Webpack, вы можете использовать оба типа модулей в своем коде JavaScript.
При использовании модулей CommonJS с Webpack их можно просто импортировать с помощью функции require() в коде JavaScript. При использовании модулей ES с Webpack вам необходимо использовать ключевые слова import и export в вашем коде JavaScript, а также использовать плагин babel-loader для переноса ваших модулей ES в JavaScript, который может быть понят всеми версиями браузера.
В целом, модули JavaScript и сборщики модулей являются важной частью современной веб-разработки и могут помочь вам писать более организованный, удобный в сопровождении и масштабируемый код.
