JS模块化:ES6规范

最新推荐文章于 2024-06-07 09:30:00 发布

五花毛

最新推荐文章于 2024-06-07 09:30:00 发布

阅读量528

点赞数

分类专栏： JavaScript 文章标签： JS模块化 ES6

本文链接：https://blog.csdn.net/Hanhanyoona/article/details/84938815

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

ES6规范说明:
       依赖模块需要编译打包处理
   ES6规范语法:
       导出模块:export
       引入模块:import
   ES6规范实现(浏览器端):
       使用Babel将ES6编译为ES5代码
       使用Browserify编译打包js

举个栗子:

第一步创建目录结构如下,定义package.json

{
           "name":"es6_babel_browserify",
           "version":"1.0.0"
       }

第二步:
安装babel-cli,babel-preset-es2015和Browserify // cli: command line interface(命令行接口)
       下载babel-cli 用来使用babel命令
       npm install babel-cli browserify -g
       npm install babel-preset-es2015 --save-dev
       preset 预设(将es6转换为es5的所有插件打包)

第三步:

在根目录下创建并定义.babelrc文件 ( rc:run control )运行时控制文件
       {
           "presets":["es2015"]
       }

第四步:编码

module1.js

//暴露模块
//分别暴露(常规暴露)

export function foo(){
	console.log('foo module1')
}

export function bar(){
	console.log('bar module1')
}

export let arr = [1,2,3,4]

module2.js

// 统一暴露(常规暴露)

function fun1(){
	console.log('fun1 module2')
}

function fun2(){
	console.log('fun2 module2')
}

export {fun1,fun2}

module3.js

// 默认暴露 可以暴露任意数据类型 暴露的什么数据就接受到什么数据
// 默认暴露只能暴露一次
// export default value
export default  {
	msg:'我是默认暴露',
	foo(){
		console.log(this.msg)
	}

}

main.js

// 引入其他模块

// 语法: import xxx from '路径'

// 对象的解构赋值
import {foo,bar,arr} from './module1' 
import {fun1,fun2} from './module2' 
import module3 from './module3'


foo()
bar()
console.log(arr)
fun1()
fun2()
module3.foo()

第五步:编译

使用babel将es6编译为es5代码(包括CommonJS语法):
babel js/src -d js/build (babel 可以创建文件 Browserify不能)
使用browserify编译js
browserify js/build/main.js -o js/dist/bundle.js

编译后的目录结构如下:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ES6_babel_browserify</title>
</head>
<body>
	
</body>
<script type="text/javascript" src="./js/dist/bundle.js"></script>
</html>

打印结果如下:

五花毛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS模块化:ES6规范

ES6规范说明: 依赖模块需要编译打包处理 ES6规范语法: 导出模块:export 引入模块:import ES6规范实现(浏览器端): 使用Babel将ES6编译为ES5代码使用Browserify编译打包js举个栗子:第一步创建目录结构如下,定义package.json{ ...
复制链接

扫一扫

专栏目录