前言

最近在学习ES6模块化时,遇到了一些问题,通过查询相关资料得以解决,本篇随笔详细记录了解决方法。

具体内容

以下定义一个模块common.js

在test.html中引入上述定义的模块

运行上述test.html文件时,浏览器控制台如下错误

Uncaught SyntaxError: Cannot use import statement outside a module

错误原因:浏览器还没有完全支持ES6模块,所以需要在导入模块时,在script标签中加“type = module”,如下图所示:

但是,解决完上述问题之后,新的问题又出现了,浏览器控制台报如下报错:

以上问题表示出现的跨域问题,可是为什么会出现跨域呢

  首先,script标签是自带跨域功能的,这也就是我们在某些场合会通过jsonp并结合script来请求资源的原因。

  其次,导致跨域的原因是协议、域名、端口号只要有一个不同就会导致跨域,而这里的协议通常是指http协议、https等协议,也就是说http、data、chrome、chrome-extension、https这些协议是支持跨域请求的,而file协议并不支持。

  file协议:本地文件传输协议,主要目的就是用于访问本地计算机中的文件,好比通过Windows的资源管理器去打开文件或者通过右键单击打开一样,然后通过“file:文件路径”这样的形式去访问。

  浏览器通过file协议和http协议去访问文件(file:///文件路径和http://访问路径)的区别:

  • file协议用于访问本地计算机的文件,好比通过资源管理器打开文件一样,需要注意的是它是针对本地的,即file协议是访问本机的文件资源。
  • http协议访问本地的html文件,相当于将本机作为一台http服务器,然后通过localhost访问的是本地服务器,再通过http服务器去访问本机的文件资源。
  • 通俗说,file协议只是简单请求本地文件,将其作为一个服务器未解析的静态文件打开;而http是在本地搭建一个服务器再通过服务器解析打开文件。

  当在本机直接打开一个网页(例如本例的test.html),该网页通过script标签引入了common.js,则在浏览器地址栏呈现的地址是“file:///C:/Users/wangqin/Desktop/test.html”,这样会出现跨域问题。而http、https等协议支持跨域请求,所以解决办法可以通过在本地搭建一个服务器去进行资源的访问来解决跨域问题

  搭建本地服务器,可以使用Apache Tomcat;亦可以使用vue-cli或webpack-cli脚手架搭建。具体操作方法此处不再赘述。

结束语

  在工作项目开发和学习过程中,总会遇到各种各样的bug,当一步一步去解决完bug时,会恍然大悟,收获颇多,所以希望大家和我一样,庆幸遇见bug让自己学到更多,见识更多。哈哈哈哈……

ES6模块化使用遇到的问题的更多相关文章

  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模块化深入 debug

    引子: 2020.2.24.最近刚写完一个vue项目.项目用到ES6的模块化 想到之前写node项目用到过commonjs模块化 就想着把所有用到过的模块化技术 总结学习一下 在看阮一峰老师的 es6 ...

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

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

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

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

随机推荐

  1. call和apply实现的继承

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. linux中的read_link

    readlink是linux系统中一个常用工具,主要用来找出符号链接所指向的位置. readlink 获取当前进程对应proc/self/exe]:shell中  readlink /proc/sel ...

  3. nodejs进阶:密码加盐:随机盐值

    demo var crypto = require('crypto'); function getRandomSalt(){ return Math.random().toString().slice ...

  4. python补充4

    一 如何判断一个对象是不是函数类型 #方法一def func(arg): if callable(arg): print("是函数"+arg()) else: print(arg) ...

  5. CentOS7.6 部署asp.net core2.2 应用

    1.安装.net Core SDK 在安装.NET之前,您需要注册Microsoft密钥,注册产品存储库并安装所需的依赖项.这只需要每台机器完成一次. 打开终端并运行以下命令: sudo rpm -U ...

  6. read more阅读更多,文字超过三行字符后面添加省略号

    var text;$('.blog-item').each(function (i) {text = $(this).find('.blog-excerpt').html();if (text.len ...

  7. c# 转16进制

    1.byte[] 转换16进制字符串 1.1 BitConverter方式 var str = DateTime.Now.ToString(); var encode = Encoding.UTF8; ...

  8. 深入理解MAGENTO – 第九章 – 数据集合瓦瑞恩

    本来,作为一个PHP程序员,如果你想攒一组变量的相关你有一个选择,古老的 阵列 . 尽管共享一个地址的名称与C存储器的阵列,一个PHP数组是一种通用的字典可变数组索引像数值对象结合行为的影响. 在其他 ...

  9. Delphi ADOQuery的 DisableControls 和 EnableControls方法

    DisableControls方法是在程序修改或后台有刷新记录的时候切断数据组件,如TTABLE.ADOQUERY等等与组件数据源的联系.如果没有切断,数据源中只要一有数据的改动,尤其是批量改动的话, ...

  10. 数字IT基础-数据采集总线

    摘要: 日志服务是阿里自产自用的产品,在双十一.双十二和新春红包期间承载阿里云/蚂蚁全站.阿里电商板块.云上几千商家数据链路,每日处理来自百万节点几十PB数据,峰值流量达到每秒百GB, 具备稳定.可靠 ...