前端模块化开发

  • A+
所属分类:Web前端
摘要

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

CommonJS规范

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

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

  1. 创建“module”文件夹

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

    // 定义成员: const sum = function (a, b) {     return a + b } const subtract = function (a, b) {     return a - b } const multiply = function (a, b) {     return a * b } const divide = function (a, b) {     return a / b } 
  3. 导出模块中的成员

    // 导出成员: module.exports = {     sum: sum,     subtract: subtract,     multiply: multiply,     divide: divide } //简写 module.exports = {     sum,     subtract,     multiply,     divide } 
  4. 创建 mokuai-common-js/引入模块.js

    //引入模块,注意:当前路径必须写 ./ const m = require('./四则运算.js') console.log(m) const r1 = m.sum(1,2) const r2 = m.subtract(1,2) console.log(r1,r2) 
  5. 运行程序

    node 引入模块.js 

    前端模块化开发

ES6模块化规范

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

  1. 创建 mokuai-es6 文件夹

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

    export function getList() {     console.log('获取数据列表') } export function save() {     console.log('保存数据') } 
  3. 创建 src/userComponent.js文件,导入模块

    //只取需要的方法即可,多个方法用逗号分隔 import { getList, save } from './userApi.js' getList() save() 

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

  4. 初始化项目

    npm init -y 
  5. 配置 .babelrc

    {     "presets": [         "es2015"     ],     "plugins": [] } 
  6. 安装转码器,在项目中安装

    npm install --save-dev babel-preset-es2015 
  7. 定义运行脚本,package.json中增加"build"

    前端模块化开发

  8. 执行命令转码

    npm run build 

    前端模块化开发

  9. 运行程序

    node dist/userComponent.js 

    前端模块化开发

ES6模块化写法2

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

    export default {     getList() {         console.log('获取数据列表2')     },     save() {         console.log('保存数据2')     } } 
  2. 创建 src/userComponent2.js,导入模块

    import user from "./userApi2.js" user.getList() user.save() 
  3. 执行命令转码

    npm run build 
  4. 运行程序

    node dist/userComponent2.js