JavaScriptのインポートとエクスポートでモジュール管理を効率化

// module.js
export const greet = name => `Hello, ${name}!`;

// main.js
import { greet } from './module.js';
console.log(greet('World'));

// utilities.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './utilities.js';
console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3

// math.js
export default function multiply(a, b) {
  return a * b;
}

// main.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6

// module.js
export const name = 'Module';
export default function greet() {
  return 'Hello from the default export!';
}

// main.js
import greet, { name } from './module.js';
console.log(greet()); // Hello from the default export!
console.log(name); // Module

// constants.js
export const PI = 3.14;
export const E = 2.71;

// main.js
import * as constants from './constants.js';
console.log(constants.PI); // 3.14
console.log(constants.E); // 2.71

// math.js
export const add = (a, b) => a + b;

// main.js
import { add as sum } from './math.js';
console.log(sum(1, 2)); // 3

async function loadModule() {
  const module = await import('./module.js');
  console.log(module.greet('Dynamic Import'));
}

loadModule();

// module1.js
export const hello = () => 'Hello';

// module2.js
export { hello } from './module1.js';

// main.js
import { hello } from './module2.js';
console.log(hello()); // Hello

// 相対パス
import { func } from './folder/module.js';

// 絶対パス（設定が必要）
import { func } from 'folder/module.js';

// Webpack設定例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

// tree-shaking.js
export const usedFunction = () => console.log('Used');
export const unusedFunction = () => console.log('Unused');

// main.js
import { usedFunction } from './tree-shaking.js';
usedFunction();