20.ES模块导入规则

容易出错的地方

页面不基于服务器运行，会出现跨域的错误

origin 'null' has been blocked by CORS policy: Cross origin requests are only

使用模块化时，页面不加type = "module" 会出现语法错误

app.js:1 Uncaught SyntaxError: Unexpected token {

import导入模块时不添加 .js 的后缀名会报找不到module错误

GET xxx net::ERR_ABORTED 404 (Not Found)

import { Student } from './Student.js';

导入导出方式

导出方式

定义时导出

批量导出

导出重命名（不建议）

默认导出

// 1.定义时导出

export let uname = '李四';

export function showStudentName(){

console.log(uname);

}

export class SomeAnimalInfo{

constructor(type,age){

this.type = type;

this.age = age;

}

showInfo(){

console.log(`物种:${this.type},年龄：${this.age}`);

}

}

// 2.批量导出

const PI = 3.1415926;

const DBNAME = 'Local';

... ...

export { PI, DBNAME };

// 3.默认导出 - 工具类

export default class {

static log(msg) {

let now = new Date();

console.log(`${now.toLocaleString()} ${msg}`);

}

static setCookie(){

}

... ...

}

导入方式

导入重命名

导入整个模块

导入默认模块

//1.导入重命名 as语法

import {num, showStudentName as showName} from './all.js';

// 2.导入整个模块 需要使用as重命名，接收的是一个对象

import * as cons from './const.js';

// 3.导入默认模块 需要起名，名字包含导出内容

import Tool from './tools.js';

作者：也在水湄

链接：https://www.jianshu.com/p/d23a506cdca2

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。