前端模块化开发

时间 2021-03-16

标签 javascript java node es6 npm json babel ide 模块化函数栏目 JavaScript 繁體版

原文原文链接

CommonJS规范

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

每一个文件就是一个模块，有本身的做用域。在一个文件里面定义的变量、函数、类，都是私有的对其余文件不可见。java

建立“module”文件夹node

建立 mokuai-common-js/四则运算.jses6

// 定义成员：
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
}

导出模块中的成员npm

// 导出成员：
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}
//简写
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

建立 mokuai-common-js/引入模块.jsjson

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

运行程序babel
```
node 引入模块.js
```

ES6模块化规范

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

建立 mokuai-es6 文件夹模块化

建立 src/userApi.js 文件，导出模块函数

export function getList() {
    console.log('获取数据列表')
}
export function save() {
    console.log('保存数据')
}

建立 src/userComponent.js文件，导入模块
```
//只取须要的方法便可，多个方法用逗号分隔
import { getList, save } from './userApi.js'
getList()
save()
```
注意：这时的程序没法运行的，由于ES6的模块化没法在Node.js中执行，须要用Babel编辑成ES5
后再执行
初始化项目
```
npm init -y
```

配置 .babelrc

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

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

npm install --save-dev babel-preset-es2015

定义运行脚本，package.json中增长"build"
执行命令转码
```
npm run build
```
运行程序
```
node dist/userComponent.js
```

ES6模块化写法2

建立 src/userApi2.js ，导出模块

export default {
    getList() {
        console.log('获取数据列表2')
    },
    save() {
        console.log('保存数据2')
    }
}

建立 src/userComponent2.js，导入模块

import user from "./userApi2.js"
user.getList()
user.save()

执行命令转码
```
npm run build
```
运行程序
```
node dist/userComponent2.js
```