ES6模块化深入 debug
引子:
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的更多相关文章
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
- ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...
- CommonJS、AMD、CMD和ES6模块化区别
本文参考自:https://www.cnblogs.com/chenguangliang/p/5856701.html 1.CommonJS NodeJS是CommonJS规范的实现,webpack ...
- javascript ES6模块化
一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...
- ES6 模块化与 CommonJS 模块化
ES6 模块化 import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口. export 可以有多个,export default 仅有一个 a.js 模块a文件 导出多个方 ...
- ES6 模块化(Module)export和import详解 export default
ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...
- ES6模块化使用遇到的问题
前言 最近在学习ES6模块化时,遇到了一些问题,通过查询相关资料得以解决,本篇随笔详细记录了解决方法. 具体内容 以下定义一个模块common.js 在test.html中引入上述定义的模块 运行上述 ...
- 07 . 前端工程化(ES6模块化和webpack打包)
模块化规范 传统开发模式主要问题 /* 1. 命名冲突 2. 文件依赖 */ 通过模块化解决上述问题 /* 模块化就是把单独的一个功能封装在一个模块(文件)中,模块之间相互隔离, 但是可以通过特定的接 ...
- js 模块化的一些理解和es6模块化学习
模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理 5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...
随机推荐
- 【android官方文档】与其他App交互
发送用户到另外一个App YOU SHOULD ALSO READ 内容分享 One of Android's most important features is an app's ability ...
- 预备JS执行环境,预执行脚本
page.evaluateOnNewDocument(pageFunction, ...args) pageFunction <function|string> Function to b ...
- 性能测试中TPS上不去的几种原因
性能测试中TPS上不去的几种原因 什么叫TPS: TPS(Transaction Per Second):每秒事务数,指服务器在单位时间内(秒)可以处理的事务数量,一般以request/second为 ...
- 吴裕雄--天生自然JAVA数据库编程:JDBC2.0操作
import java.sql.Connection ; import java.sql.DriverManager ; import java.sql.SQLException ; import j ...
- 判断ES数据是否更新成功
参考:https://stackoverflow.com/questions/38928991/how-to-detect-if-a-document-update-in-elasticsearch- ...
- 61 C项目------家庭收支软件
1,目标: ①模拟实现一个基于文本界面的<家庭收支软件> ②涉及知识点 局部变量和基本数据类型 循环语句 分支语句 简单的屏幕输出格式控制 2,需求说明: ①模拟实现基于文本界面的< ...
- PHP开发环境(Apache+mysql+PHPstorm+php)的搭建
一.搭建思路 从浏览器到web服务器(Apache)到PHP环境到mysql数据库 二.环境搭建 1.浏览器(略) 2.Apache的安装与配置 1)官方下载地址:https://httpd.apac ...
- PV & PVC【转】
Volume 提供了非常好的数据持久化方案,不过在可管理性上还有不足. 拿前面 AWS EBS 的例子来说,要使用 Volume,Pod 必须事先知道如下信息: 当前 Volume 来自 AWS EB ...
- GNS3 模拟icmp重定向
网关实质上是一个网络通向其他网络的IP地址.比如有网络A和网络B,网络A的IP地址范围为“192.168.1.1~192. 168.1.254”,子网掩码为255.255.255.0:网络B的IP地址 ...
- tomcat-性能?
http://www.cnblogs.com/zhuawang/p/5213788.html http://www.cnblogs.com/zhuawang/p/5213192.html http:/ ...