天天看点

前端模块化开发

目录

CommonJS规范

ES6模块化规范

ES6模块化写法2

CommonJS使用 exports 和require 来导出、导入模块

每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的对其他文件不可见。

创建“module”文件夹

创建 mokuai-common-js/四则运算.js

导出模块中的成员

创建 mokuai-common-js/引入模块.js

运行程序

前端模块化开发

ES6使用 export 和 import 来导出、导入模块

创建 mokuai-es6 文件夹

创建 src/userApi.js 文件,导出模块

创建 src/userComponent.js文件,导入模块

注意:这时的程序无法运行的,因为ES6的模块化无法在Node.js中执行,需要用Babel编辑成ES5

后再执行

初始化项目

配置 .babelrc

安装转码器,在项目中安装

定义运行脚本,package.json中增加"build"

前端模块化开发

执行命令转码

前端模块化开发
前端模块化开发

创建 src/userApi2.js ,导出模块

创建 src/userComponent2.js,导入模块