前端模块化开发

目录

• CommonJS规范
• ES6模块化规范
• ES6模块化写法2

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

原文转载：http://www.shaoqun.com/a/626667.html

跨境电商：https://www.ikjzd.com/

网络星期一：https://www.ikjzd.com/w/80

文化衫事件：https://www.ikjzd.com/w/1932

目录CommonJS规范ES6模块化规范ES6模块化写法2CommonJS规范CommonJS使用exports和require来导出、导入模块每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的对其他文件不可见。创建"module"文件夹创建mokuai-common-js/四则运算.js//定义成员：constsum=function(a,b){returna+
邮乐网购物商城：https://www.ikjzd.com/w/1776
淘粉吧首页：https://www.ikjzd.com/w/1725.html
菜鸟网：https://www.ikjzd.com/w/1547
亚马逊卖家该如何选品？怎么找到潜在热销品？：https://www.ikjzd.com/home/109370
口述：极品相亲男非我不娶甩都甩不掉相亲极品老妈：http://lady.shaoqun.com/m/a/32570.html
本土卖家Review被清空，欲举报中国卖家：https://www.ikjzd.com/home/4285