ES6 思考学习记录(一)

3 篇文章 0 订阅
3 篇文章 0 订阅

1.ES模块化如何使用,开发环境如何打包?

  1. 使用-> 语法是怎么样的。
  2. 开发环境-> webpack,rollup...

语法:在export里面分为export defalut 和export ,export default 就是默认输出的意思,一个文件只有一个export default,但是可以有多个export ,在import 时 如果为export default 就不需要加大括号,但是如果是 export  需要加上大括号。

开发环境:将模块化打包的工具有webpack,rollup等,其中webpack比较普遍,他的功能也比较丰富,然后rollup他是属于功能比较单一的,但是比较强大,在对比bundle.js里面的输出可以发现,webpack他编译出来上面会一段他自带的东西,然后像rollup他就只有一段umd相关的,以及下面都会较好地保留你的代码,方便你去做调试。同时 rollup会比webpack 打包出的文件小很多。无论采用哪个工具进行打包,都需要用到babel来进行编译转化,将当前的ES6的语法转化为浏览器可以使用的ES5,或者ES4的语法。 

展望:JS的模块化标准从很早以前的远古时期是没有标准,到后来的AMD成为标准,require.js是他的标准,也有CMD的标准,但现在CMD使用的比较少了,到打包工具的出现,ES6的出现,统一的模块化标准,现在的浏览器都还没有对ES6支持较好,因此都需要用打包工具将其打包成可以使用的ES5。对于标准,我们可以选择去造一个LIB,但不要自造一个标准。

util1.js

export default {
    a: 100
}

util2.js

export function fn1() {
    console.log('fn1')
}

export function fn2() {
    console.log('fn2')
}

index.js

import util1 from './util1.js'
import {fn1, fn2} from './util2.js'

console.log(util1.a)
fn1()
fn2()

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值