直接上代码， 成功测验了es6的新特性 import , export语法。

服务器返回 js文件时，要加上content-type: applicaiton/javascript 这个字段。

index.html

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, minimum-scale=1.0">

<script type="module">

    import { foo,name,s } from './foo.js';

    alert(foo());

    alert(name);

</script>

foo.js

export function foo() {

  return 'bar';

}

export var name='ljl';

//另外，export支持别名导出， 所以改成下面这样也是可以的。

export function foo() {

  return 'bar';

}

 var name='ljl';

var age = 28;

export{age,name as nale, name}

　　

chrome 浏览器version 68 ：运行（http://localhost:8080/index.html）结果如下

去掉我故意加入的 "s"后， 就不会报错了。

另外，当然抽成3个文件也是可以的。

也能运行成功。

参考原文：https://jakearchibald.com/2017/es-modules-in-browsers/

https://segmentfault.com/a/1190000014342718

----------------------------------------------------------------------------------------------------------------------

https://www.sitepoint.com/understanding-es6-modules/

es6中的import,export浏览器已经支持的更多相关文章

  1. ES5和ES6中关于import & export的书写方式的区别

    ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...

  2. Node.js 中使用 ES6 中的 import / export 的方法大全

    https://blog.csdn.net/universsky2015/article/details/83754741

  3. 彻底理解JavaScript ES6中的import和export

    0.前言 前端工程,在最早的时候是没有模块的概念的.随着前端工程的发展,前端开发也越来越规范化,更像是软件工程了.那么随之而来的,为了解决工程化的问题,就引入了模块的概念.但是在早期,因为ecmasc ...

  4. ES6中Class与export简单用法

    一.Class ES6中的Class用法类似Java的Class用法,但class的本质是js一个function //定义类 class Person { //定义构造方法 constructor( ...

  5. ES6中的import()函数

    import(specifier) 上面代码中,import函数的参数specifier,指定所要加载的模块的位置.import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要 ...

  6. ES6中的import与export对class操作相关用法举例

    两种用法: 一.指定输出类名 // export 输出 export class App extends React.Componet { // ..code } // import 引入 impor ...

  7. es6+require混合开发，兼容es6 module，import,export

    近一年,一直很忙,做了不少的项目,不过都不是太满意,毕竟是别人的作品,不好意思写出来.最近打算开发一个es6的项目,项目中用到require,本文主要讲解es6的module规范怎么与require的 ...

  8. es6+require混合开发，兼容es6 module，import,export之 加载css及公用date-main

    大家好!上篇文章已经介绍了搭建文件夹,以及加载js文件.现在讲一下加载css ,以及对baseUrl的理解 1.对项目结构的认知 一个项目的结构是根据项目的架构来决定的,当然也可以做到更智能,但是意义 ...

  9. 探讨ES6的import export default 和CommonJS的require module.exports

    今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...

随机推荐

  1. XINCLUDE

    前言 导入外部xml文档,类似于php的include,将外部定义的dtd引入当前文件,因为引入外部实体具有局限性,所以使用xinclude来引入 语法 导入外部文档: <xi:include ...

  2. 429.N叉树的层次遍历

    给定一个 N 叉树,返回其节点值的层序遍历. (即从左到右,逐层遍历). 例如,给定一个 3叉树 : 返回其层序遍历: [ [1], [3,2,4], [5,6] ] 说明: 树的深度不会超过 100 ...

  3. Python之路【第四篇】: 函数、递归、内置函数

    一. 背景提要 现在老板让你写一个监控程序,监控服务器的系统状况,当cpu＼memory＼disk等指标的使用量超过阀值时即发邮件报警,你掏空了所有的知识量,写出了以下代码 while True: i ...

  4. 从JDBC看Mybatis的设计

    Java数据库连接,(Java Database Connectivity,简称JDBC)是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口,提供了诸如查询和更新数据库中数据的方法. 六 ...

  5. intellij idea 中文 汉化包 韩梦飞沙

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 汉化包 百度云盘 下载地址: https://pan.baidu.com/s/1hs6B ...

  6. 51nod1437 迈克步 单调栈

    考虑一个点作为最小值的区间$[L[i], R[i]]$ 那么这个区间的所有含$i$的子区间最小值都是$v[i]$ 因此,用单调栈求出$L[i], R[i]$后,对$R[i] - L[i] + 1$这个 ...

  7. AMScrollingNavbar框架(自动隐藏导航栏)使用简介

    AMScrollingNavbar框架是一个可以上拉隐藏导航栏和下拉显示导航栏的框架,这个开源框架的调用也很简单,本章节就给大家介绍一下这个框架的用法. 一.下载及导入框架 AMScrollingNa ...

  8. react-native-image-zoom-viewer学习

    github原地址 react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果,点击小图片实现浏览原图效果. 安装: npm i react-native-imag ...

  9. oracle定时任务(dbms_job)

    author:skate time:2007-09-12 http://publish.it168.com/2006/0311/20060311017002.shtml 今天总结下Oracle的任务队 ...

  10. 字符串型MySQL查询条件需要注意的一点

    最近在工作中遇到了数据库服务器产生很多读写队列的问题,于是要求大家开始优化我们的SQL语句. 下面是查询quotedata_history表中的code字段的SQL语句,其中code字段的类型是var ...