commonjs模塊化

首先寫一個api，提供給外部調(diào)用

//commonjslet sum =(a,b)=> a+b;// 暴露接口 module.exports = {sum // sum:sum }

導(dǎo)入調(diào)用

const m = require('./Api.js')console.log(m.sum(10,20));

es6模塊化

首先寫一個api，提供給外部調(diào)用

//es6 export function sum(a,b){return a+b; }export function sub(a,b){return a-b; }

導(dǎo)入調(diào)用

import {sub,sum} from "./Api.js"console.log("sub(100,30) = " ,sub(100,30)); console.log("sum(100,30) = ",sum(100,30));//如果直接 node test.js 是會報錯了，因為默認是不支持es6 語法 我們需要使用babel轉(zhuǎn)換

如果直接 node test.js 是會報錯了，因為默認是不支持es6 語法 我們需要使用babel轉(zhuǎn)換
比如以下報錯：

根據(jù)我們之前學(xué)過了Babel
1、首先我們初始化項目npm init -y 將其轉(zhuǎn)換為node項目

2、創(chuàng)建.babelrc文件

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

3、安裝轉(zhuǎn)換器 npm install --save-dev babel-preset-es2015

4、我們可以直接使用babel命令也可以使用package.json定義腳本。這里我們使用package.json定義腳本的方式。
package.json

{......,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"babel src -d dist"},..... }

在上邊我們定義了build命令，這樣我們執(zhí)行npm run build，就可以在項目根目錄下的dist目錄中看到轉(zhuǎn)換后的代碼。


我們一起看看dist下的轉(zhuǎn)換后的代碼吧

Api.js

"use strict";Object.defineProperty(exports, "__esModule", {value: true }); exports.sum = sum; exports.sub = sub; //es6 function sum(a, b) {return a + b; }function sub(a, b) {return a - b; }

test.js

"use strict";var _Api = require("./Api.js");console.log("sub(100,30) = ", (0, _Api.sub)(100 ,30)); console.log("sum(100,30) = ", (0, _Api.sum)(100, 30));//如果直接 node test.js 是會報錯了，因為默認是不支持es6 語法 我們需要使用babel轉(zhuǎn)換

執(zhí)行成功

es6第二種寫法

我們使用對象導(dǎo)出的方式
Api.js

export default{sum(a,b){return a+b;},sub(a,b){return a-b;} }

test.js

import calculate from "./Api.js" console.log("sub(100,30) = " ,calculate.sub(100-30)); console.log("sum(100,30) = ",calculate.sum(100,30));//如果直接 node test.js 是會報錯了，因為默認是不支持es6 語法 我們需要使用babel轉(zhuǎn)換

這種寫法會比上邊那種會方便一些。
我們重新編譯轉(zhuǎn)換npm run build

運行

總結(jié)

以上是生活随笔為你收集整理的commonjs 和 es6模块化开发入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。