JavaScript import语句仅用于导入框架吗？还可导入哪些内容？

JavaScript的import语句并非仅用于导入框架，它是ES6模块化规范的核心语法，用于在不同模块之间共享代码和资源，适用场景非常广泛。具体可导入的内容包括：

• 自定义JavaScript模块
  你可以导入自己编写的任何JS模块，比如工具函数、业务逻辑模块等。示例：

  // utils.js
  export const calculateSum = (a, b) => a + b;
  
  // main.js
  import { calculateSum } from './utils.js';
  console.log(calculateSum(2, 3)); // 输出 5
  

• 第三方库/工具包
  除了React、Vue这类框架，还能导入各类工具库（比如日期处理、数据验证库）。示例：

  import dayjs from 'dayjs';
  console.log(dayjs().format('YYYY-MM-DD')); // 输出当前日期
  

• 非JavaScript资源文件
  在Webpack、Vite等前端构建工具的支持下，import还能导入多种静态资源：

  • CSS样式文件：

    import './styles/global.css';
    

  • 图片、字体等资源：

    import avatar from './assets/avatar.jpg';
    document.getElementById('user-avatar').src = avatar;
    

  • JSON配置文件：

    import appConfig from './config.json';
    console.log(appConfig.baseUrl);
    

• 模块的默认导出与批量导出
  支持导入模块的默认导出，或批量导入所有命名导出：

  • 默认导出：

    // api.js
    export default function fetchData(url) {
      return fetch(url).then(res => res.json());
    }
    
    // main.js
    import fetchData from './api.js';
    fetchData('/api/user').then(data => console.log(data));
    

  • 批量导入：

    import * as mathUtils from './math-utils.js';
    console.log(mathUtils.add(1, 2), mathUtils.multiply(3, 4));
    

内容的提问来源于stack exchange，提问作者user21110999