直接上代码， 成功测验了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. Mybatis使用入门

    一.Mybatis简介 1.传统JDBC的不足 我们首先看一下JDBC的一般操作流程.比如,我想从user表中获取根据name获取数据,下面是传统JDBC代码: package lkb.webchat ...

  2. (转) redis的事务和watch

    redis的事务 严格意义来讲,redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的. redis中的事务定义 Redis中的事务(transaction)是一组命令的集合. 事务同 ...

  3. 八步详解Hibernate的搭建及使用

    本文通过了八个步骤以及一些实例添加用户来介绍Hibernate的搭建和使用,真切的介绍了hibernate的基本用法,其中好多优点等待我们自己去发现,比如hibernate中的缓存机制,映射方案. 1 ...

  4. 【BZOJ 3958】 3958: [WF2011]Mummy Madness （二分+扫描线、线段树）

    3958: [WF2011]Mummy Madness Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 96  Solved: 41 Descripti ...

  5. WPF常用控件样式( 内含一简单插件式开发示例)

    最近离职,离职前面的一份外派然后又外包的工作,总觉得不妥,之后外派的办个入职手续都一再失约,干脆推了.恰逢清明时节,暴雨纷纷,于是打算先休息休息调整下状态,工作的事情还是谨慎点的好,免得影响心情.话说 ...

  6. luogu P1919 【模板】A*B Problem升级版（FFT快速傅里叶）

    模板 嗯 做多项式乘法,进位 没了 #include<cmath> #include<cstdio> #include<cstring> #include<a ...

  7. luoguP3250 [HNOI2016]网络 树链剖分 + 堆

    机房某大佬告诉我,一条链在全局线段树中的区间最多有$log$段 因此同样的,代表不在这条链上的区间同样只有$log$段 对这$log$段区间进行维护即可 为了能够删除,在线段树的每个节点暴力维护一个堆 ...

  8. Parse要垮了

    一清早收到邮件就睡不着了... 花了那么多时间熟悉api,第一个基于parse的app也要做完了... 看来国内的类似产品也不敢用了,还是老老实实用阿里云自己写backend吧...

  9. JNI介绍

    JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官在运行Java代码的Android中有着 ...

  10. 两个函数彻底理解Lua中的闭包

    本文通过两个函数彻底搞懂Lua中的闭包,相信看完这两个函数,应该能理解什么是Lua闭包.废话不多说,上 code: --[[************************************** ...