前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6 模块写法示例

ES6 模块写法示例

作者头像
前端GoGoGo
发布2018-08-24 16:25:29
3220
发布2018-08-24 16:25:29
举报

模块导出

导出默认

代码语言:javascript
复制
export default { foo: 'bar' }// CommonJS module.exports = { foo: 'bar' }

导出带名字的

代码语言:javascript
复制
export var foo = 'bar' // CommonJS module.exports.foo = 'bar'
export var baz = 'ponyfoo'

模块导入

导入默认的

代码语言:javascript
复制
import _ from 'lodash'// var _ = require('lodash')

导入带名字的

代码语言:javascript
复制
import {map, reduce} from 'lodash'
import {map as myMay} from 'lodash'

导入所有带名字的

代码语言:javascript
复制
import * as _ from 'lodash'

导入所有必须加 as 语句。

综合 Demo

demo.js 如下

代码语言:javascript
复制
export default {
  a:1
}
export var other = {
  b:2,
  c:3
}

test.js 如下

代码语言:javascript
复制
import d from './demo'
console.log(d) // {a: 1}
import {default as d1,other1, other2 as myName, other3} from './demo'
console.log(d1) // {a: 1}
console.log(other1) // {b: 2, c: 3}
console.log(myName)  // {d: 4}
console.log(other3) // undefined

import * as all from './demo'
console.log(all) //  {default: Object, other1: Object, other2: Object, __esModule: true}
console.log(all.default) // {a: 1}

注意: importexport 只能在顶级用,不能在代码块中用。否则会报 'import' and 'export' may only appear at the top level。例如

代码语言:javascript
复制
var isDebugger = true
if(isDebugger) {
  import mock from './mock'
}

这种情况,可以考虑用 CommonJS 或 System.import 的写法。

参考

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.10.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 模块导出
    • 导出默认
      • 导出带名字的
      • 模块导入
        • 导入默认的
          • 导入带名字的
            • 导入所有带名字的
            • 综合 Demo
            • 参考
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档