为什么要使用前端模块化?
减少代码污染.
数据更安全,防止外部修改.
提高可维护性.
什么是前端模块化?
将大工程代码拆分,分成多个模块,按需引入使用.
以下浅谈常用的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内容
