commonjs模塊化

首先寫一個api，提供給外部調用

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

導入調用

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

es6模塊化

首先寫一個api，提供給外部調用

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

導入調用

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轉換

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

根據我們之前學過了Babel
1、首先我們初始化項目npm init -y 將其轉換為node項目

2、創建.babelrc文件

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

3、安裝轉換器 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命令，這樣我們執行npm run build，就可以在項目根目錄下的dist目錄中看到轉換后的代碼。


我們一起看看dist下的轉換后的代碼吧

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轉換

執行成功

es6第二種寫法

我們使用對象導出的方式
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轉換

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

運行

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。