直接上代码， 成功测验了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. 《java虚拟机》----虚拟机字节码执行引擎

    No1: 物理机的执行引擎是直接建立在处理器.硬件.指令集合操作系统层面上的,而虚拟机的执行引擎则是由自己实现的,因此可以自行制定指令集与执行引擎的结构体系,并且能够执行那些不被硬件直接支持的指令集格 ...

  2. python 2 如何安装 MySQL 数据库操作库

    我试了好几种网上的办法,在 windows 10 VS2017 环境下不是缺了头文件,就是缺 .lib,反正十分繁琐,以后我也懒得搞了,都用 annaconda 来搞定就好了,时间宝贵. 在 控制台中 ...

  3. CentOS使用

    centos7编译安装git最新版 CentOS下 pycharm开发环境搭建之无穷无尽的问题 CentOS 7入门操作基础教程 centos中文站 CentOS7 常用命令集合 centos中有vi ...

  4. FastReport.Net使用：[10]报表栏目说明

    报表栏目说明 报表标题(Report Title):在每个报表的开始时打印. 报表合计区(Report Summary):在报表结尾时打印,显示在最后一行数据后,页脚前. 页眉(Page Header ...

  5. 【BZOJ 2440】 2440: [中山市选2011]完全平方数 （二分+容斥原理+莫比乌斯函数）

    2440: [中山市选2011]完全平方数 Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数 ...

  6. hihoCoder #1695 公平分队II

    题目大意 Alice 和 Bob 在玩一个游戏.Alice 将 $1$ 到 $2n$ 这 $2n$ 个整数分成两组,每组 $n$ 个.Bob 从中选一组,剩下一组归 Alice.Alice 可以与 B ...

  7. [CSAcademy]A-Game

    题目大意: 给你一个只含字符'A'和'B'的串,A和B两人轮流对其中的子串染色,要求被染色的子串中不包含已经被染色的子串. 最后,如果一方染的'A'少,那么这一方胜: 如果双方染的'A'和'B'一样多 ...

  8. HTML && xml 的区别

    HTML && xml 的区别 HTML 超文本标记语言 xml 可扩展标记语言 jsp  表面是一个HTML页面,本质是一个servlet HTML  超文本标记语言 HTML 是一 ...

  9. bzoj 3172: [Tjoi2013]单词 AC自动机

    3172: [Tjoi2013]单词 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pr ...

  10. mvc-单例多线程模式

    以spring mvc 为例子 spring mvc 的Controller类默认Scope是单例(singleton) 测试结果发现spring3中的controller默认是单例的,若是某个con ...