前端模块化之CommonJS与ES6模块化

为什么要使用前端模块化?

减少代码污染.

数据更安全,防止外部修改.

提高可维护性.

什么是前端模块化?

将大工程代码拆分,分成多个模块,按需引入使用.

以下浅谈常用的CommonJS与ES6模块化

ES6模块化

首先nodejs以及浏览器默认是不支持es6模块化的

先来看下在浏览器环境下es6模块化的一个案例:

创建三个文件,index.html页面,index.js页面对应的js文件,module.js是页面js对应的模块化js文件

module.js

将需要的数据导出

index.js

按需引入模块

index.html

页面运行

在此有两个需要注意的点:

1.不能直接在index.html右键浏览器打开,会报以下错误

跨域问题

解决方案:这里可以使用vscode中的Live插件,使用服务器的访问index.html

2.浏览器默认不支持模块化

不能导入模块

解决方案:在引入的script标签声明type="module"

这些问题解决后,就能看到引入数据成功啦~

module.js的数据在index.html下呈现

ES6模块化的几种导出方式:

1.每个模块化文件仅可以写一个default导出

默认导出写法

2.default和变量一起导出

export default和export变量方式导出

3.抽离代码封装成函数,使其变成export成员导出

函数导出

这里就大概把es6模块化介绍完毕,由于node环境不支持es6模块化语法,所以就要使用到node环境所支持的CommonJS模块化规范

CommonJS

CommonJS是一种被广泛使用的js模块化规范，核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。

module.exports导出,require导入

nodejs 不支持 es6 模块化规范,但可以使用第三方工具解决

1.在任意目录下执行，全局安装babel-cli 和 browserify： npm install babel-cli browserify -g

2.在自己项目目录下执行：npm install babel-preset-es2015 --save-dev

3.在项目根目录新建 .babelrc 文件 :

4、在src目录下书写完代码后，执行:babel src -d lib

.babelrc内容