引子:

2020.2.24.最近刚写完一个vue项目。项目用到ES6的模块化

想到之前写node项目用到过commonjs模块化

就想着把所有用到过的模块化技术 总结学习一下

在看阮一峰老师的 es6入门那本书中讲到的module语法

想着webstorm实现一下  ,验证书里写的一些特性

问题

写了两个文件

//module.js文件

let myName="laowang";
let myAge=90;
let myfn=function(){
return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
myName,
myAge,
myfn
} //main.js文件
import {myfn,myAge,myName} from './module'
console.log(myfn());//我是laowang!今年90岁了
console.log(myAge);//
console.log(myName);//laowang

然后 run main.js  发现语法错误

思路:vue中es6模块化用的好好的,语法哪里用错了,看了文档也没错,就去b站搜模块化,然后看视频发现自己script 没有表明type

解决方案一

包裹在script标签中  type='moudle'  //因为用了模块化语法,要声明

报错:GET http://localhost:63342/commomjs/module net::ERR_ABORTED 404 (Not Found)

解决方案二

在方案一报错的基础上

找不到那么就是我引入的地址不对

//错误
import {myfn,myAge,myName} from './module' //正确
import {myfn,myAge,myName} from './module.js'

成果

对es6模块化一系列的测试后

1.export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

// 写法一
export var m = 1; //变量 export function f() {}; //函数 // 写法二
var m = 1;
export {m}; function f() {}
export {f}; // 写法三
var n = 1;
export {n as m};

2.另外,export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

3.export命令可以出现在模块的任何位置,只要处于模块顶层就可以

4.import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。

5由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构

6.import语句会执行所加载的模块

ES6模块化深入 debug的更多相关文章

  1. ES6模块化

    关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...

  2. ES6模块化与常用功能

    目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...

  3. CommonJS、AMD、CMD和ES6模块化区别

    本文参考自:https://www.cnblogs.com/chenguangliang/p/5856701.html 1.CommonJS NodeJS是CommonJS规范的实现,webpack ...

  4. javascript ES6模块化

    一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...

  5. ES6 模块化与 CommonJS 模块化

    ES6 模块化 import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口. export 可以有多个,export default 仅有一个 a.js 模块a文件 导出多个方 ...

  6. ES6 模块化(Module)export和import详解 export default

    ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...

  7. ES6模块化使用遇到的问题

    前言 最近在学习ES6模块化时,遇到了一些问题,通过查询相关资料得以解决,本篇随笔详细记录了解决方法. 具体内容 以下定义一个模块common.js 在test.html中引入上述定义的模块 运行上述 ...

  8. 07 . 前端工程化(ES6模块化和webpack打包)

    模块化规范 传统开发模式主要问题 /* 1. 命名冲突 2. 文件依赖 */ 通过模块化解决上述问题 /* 模块化就是把单独的一个功能封装在一个模块(文件)中,模块之间相互隔离, 但是可以通过特定的接 ...

  9. js 模块化的一些理解和es6模块化学习

    模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理  5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...

随机推荐

  1. Android 获取当前日期距离过期时间的日期差值的完整方法直接使用

    /*** * 获取当前日期距离过期时间的日期差值 * @param endTime * @return */public String dateDiff(String endTime) { Strin ...

  2. SystemVerilog基本语法总结(中)

    Systemverilog 语法总结(中) 上一个博客分享了SV基本的概念,这一博客继续分享,等下一个博客分享一个公司的验证的笔试题目. l 事件 背景: Verilog中当一个线程在一个事件上发生阻 ...

  3. UOJ Contest #50: Goodbye Jihai

    比赛传送门:Goodbye Jihai. \(\Huge{\mathbf{再见,己亥.\\你好,庚子!\\祝大家新春快乐!}}\) A. 新年的促销 这题如果直接做的话可能方向会想歪,方向对了其实就是 ...

  4. vue移动端transition兼容

    vue移动端transition兼容 .face-recognition .wrapper(:style="{height: viewHeight+'px'}") .face-re ...

  5. IdentityServer4专题之二:OpenID介绍

    1.基于概念 OpenId是一个以用户为中心的数字身份识别框架,它具有开放.分散.自由等特性.OpenId的创建是基于这样一个概念:我们可以通过URI(或者URL网址)来识别一个网站.同样,我们也可以 ...

  6. bootstrap上下左右条纹边框悬停表格的使用

    懒得找地址:https://jingyan.baidu.com/album/0bc808fc3d88941bd585b94c.html?picindex=1

  7. jdk1.7推出的Fork/Join提高业务代码处理性能

    jdk1.7推出的Fork/Join提高业务代码处理性能 jdk1.7之后推出了Fork/Join框架,其原理个人理解为:递归多线程并发处理业务代码,以下为我模拟我们公司业务代码做的一个案例,性能可提 ...

  8. linux下mysql允许远程连接

    1. MySql安装教程 https://dev.mysql.com/doc/refman/5.7/en/linux-installation-yum-repo.html 默认情况下mysq的 roo ...

  9. dwr??

    官方网站:http://directwebremoting.org/dwr/index.html http://m.blog.csdn.net/u013628152/article/details/5 ...

  10. 比较 CEILING 和 FLOOR

    CEILING 函数返回大于或等于所给数字表达式的最小整数. FLOOR 函数返回小于或等于所给数字表达式的最大整数. 例如,对于数字表达式  12.9273,CEILING 将返回 13,FLOOR ...