JavaScript模块及引用方法

Module

参考ES6入门教程，ES6推出了模块化的概念，通过export、import命令实现静态加载。

export、import

需要将模块中的变量（var、let、const）、函数（function）、类（class）导出，需要使用export关键字。
有如下几种使用方法：

1. 声明前加上export，import名称需要和export名称一致。

// util.js
export var firstName= 'Yin';
export const lastName= 'Freedom';
export function calcFunc = (a, b) => {return a + b;};

// test.js
import { firstName, lastName } from './util.js';

2. 统一通过export { }导出，import名称需要和export名称一致。

// util.js
export var firstName= 'Yin';
export const lastName= 'Freedom';
export { firstName, lastName };

// test.js
import { firstName, lastName } from './util.js';

3. export A as B，起别名.

// util.js
export var firstName= 'Yin';
export const lastName= 'Freedom';
export { 
  firstName as name1, 
  lastName as name2
};

// test.js
import { name1, name2} from './util.js';

4. export default，import名称可以为任意名称。

// util.js
export var firstName= 'Yin';
export const lastName= 'Freedom';
export { firstName, lastName };
export default function calcFunc = (a, b) => {return a + b;};

// test.js
import _ from './util.js'; // 仅加载默认接口
import _, { name1, name2} from './util.js'; // 同时加载默认接口和其他接口

前端项目package.json

在项目开发中，一般会通过npm install引入模块，查看该模块输出接口的方法就是查看package.json中的信息。它是项目的配置文件，包括了项目的启动、打包命令，依赖包，导出信息等。
特别的，对于TypeScript项目，一般在types指定的文件中查询该包提供的类型、接口。

{
  "name": "workflow-frontend",
  "version": "1.0.0",
  // 指定模块加载的入口文件。有type则为ES6模块，没有type则为CommonJS模块。加载方法不同。
  "main": "dist/entry.js",
  "type": "module",
  // 
  "module": "dist/workflow.js",
  // TypeScript包的类型定义文件。在TypeScript项目中，会将类型、接口都在该文件中指定。
  "types": "types/index.d.ts",
  // 脚本
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  // 生产环境下需要用到的依赖
  "dependencies": {
  },
  // 开发阶段时需要的依赖包，不需要在生产中使用
  "devDependencies": {
  }
}

最后

对于JavaScript的模组、export、import、package.json、模块加载方法，可以在ES6入门教程查询详细信息。