前言

最近在学习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. linux系统:go build报错import cycle not allowed

    go build 困扰我多时的 go 编译报错:循环导入,代码肯定是没问题的,网上查说重新安装go 我觉得也不是太好的办法 import cycle not allowed package day01 ...

  2. javafx将数据库内容输出到tableview表格

    一 .创建Fxml文件,用Javafx Scene Builder 编辑页面,创建tableview(表格)和tablecolum(表格中的列),并为其设置fxid: 二.生成fxml文件的控制类: ...

  3. 微信小程序の条件渲染

    <view> 今天吃什么 </view> <view wx:if="{{condition==1}}">饺子</view> < ...

  4. CXF异常:No operation was found with the name

    https://blog.csdn.net/qq_18675693/article/details/52134805 不同包下面,别忘了namespace最后要加“/”

  5. stdio - 标准输入输出库函数

    SYNOPSIS 总览 #include <stdio.h> FILE *stdin; FILE *stdout; FILE *stderr; DESCRIPTION 描述 标注 I/O ...

  6. mysqldump 导出数据库

    mysqldump -h47.52.67.230 -P3306 -uroot -pAbc\!@#456789 --hex-blob --opt test_fooku_db >/home/test ...

  7. Splay(区间翻转)&树套树(Splay+线段树,90分)

    study from: https://tiger0132.blog.luogu.org/slay-notes P3369 [模板]普通平衡树 #include <cstdio> #inc ...

  8. SpringCloud---分布式服务跟踪---Spring Cloud Sleuth

    1.概述 1.1 为什么要用到服务跟踪? 随着业务的发展,系统规模也会变得越来越大,各服务之间的调用关系也变得越来越错综复杂: 通常一个由客户端发起的请求   在后端系统中会经过多个不同的微服务调用  ...

  9. Vue学习笔记【7】——Vue指令之v-model和双向数据绑定

    v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...

  10. 对称性——cf405d

    以后碰到这种题就应该往对称性想:设x的对称数x‘是1e6-x+1 对于任意一组对称数x+x'-2=1e6-1,2e6-(x+x')=1e6-1,即X集合Y集合同时加上任意一组对称数都是可以的 枚举每个 ...