當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

babel import语法 js_Babel 的理解

發布時間：2024/8/1 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 babel import语法 js_Babel 的理解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

由于 markdown 排版問題建議從掘金閱讀:https://juejin.cn/post/6902323049513615374

前言

babel 是什么

Babel 是一個 JavaScript 編譯器

這是babel 官網對 babel 一句短而精的定義, 該如何理解這句話的含義呢？首先定義它為一個編譯器,其次只對 JavaScript 語言負責.

關于編譯器概念可參考維基百科https://bk.tw.lvfukeji.com/wiki/%E7%BC%96%E8%AF%91%E5%99%A8

babel 能做什么

這里我們只需要知道 babel 作為 JavaScript 編譯器的工作流程:解析->轉換->生成.

通俗的可以理解為 babel 負責把 JavaScript 高級語法、新增 API 轉換為低規范以保障能夠在低版本的環境下正常執行,接下來我們看 babel 是如何工作的.

工作流程

解析 Parse

萬事開頭難,第一步的解析工作該由誰完成?

babylon

Babylon 是一款 JavaScript 解析器.

babel 本身是不負責解析工作的,而是調用了 babylon.parse 方法對源碼進行詞法解析生成 AST 樹.

轉換 Transform

babel-traverse

babel-traverse 負責遍歷 AST 樹進行增刪改的操作.

從第一步獲取到 AST 樹之后,調用 babel-traverse 庫提供的 traverse 方法對樹進行更新.

babel-types

一個基于 AST 樹的工具庫(可對節點增刪改查校驗).babel-traverse 對 AST 樹進行操作的時候便使用了此庫.

生成 Generator

最后一步將更新之后的 AST 樹進行生成代碼.

babel-generator

對外提供 generator 方法接收 ast 參數返回值為改變之后的源碼.

以上則是對 babel 編譯器整個流程大概的描述信息.所以 babel 是由一系列動作配合完成的.

使用方式

babel-standalone

介紹

由于 babel 是基于 node 環境下運行,對于非 node 環境(如瀏覽器),babel-standalone這個開源項目提供了 babel.min.js 可通過<script>方式引入使用.

題外話:babel-standalone已加入了babel大家族(上岸成為有編制一員),以后下載的 7.x 版本 babel 包內可以看到它的身影.

版本

| 名稱 | 版本 | 體積 | 備注 | 在線地址 | | ------------ | ------ | ------ | ------ | ------------------------------------------------------- | | babel.js | 6.26.0 | 1.78MB | 未壓縮 | https://unpkg.com/babel-standalone@6.26.0/babel.js | | babel.min.js | 6.26.0 | 773KB | 已壓縮 | https://unpkg.com/babel-standalone@6.26.0/babel.min.js | | babel.js | 7.12.9 | 3.1MB | 未壓縮 | https://unpkg.com/@babel/standalone@7.12.9/babel.js | | babel.min.js | 7.12.9 | 1.6MB | 已壓縮 | https://unpkg.com/@babel/standalone@7.12.9/babel.min.js |

示例

示例一 es6 轉碼
使用<script>引入在線地址或者下載之后本地引用.
將編寫的 es6 代碼放入<script type="text/babel">內,需要注意一點type 類型為 text/babel.

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>babel-standalone es6 轉碼</title><script src="https://unpkg.com/@babel/standalone@7.12.9/babel.min.js"></script></head><body><div id="output"></div><script type="text/babel">const getMsg = () => {const name = 'Babel';document.getElementById('output').innerHTML = `Hello ${name} version:${Babel.version}`;};getMsg();</script></body> </html>

示例二模擬在線實時轉碼用戶輸入的腳本
這種方式適用于一些在線轉碼的場景:
- babel 官網首頁

- babel-repl 在線轉碼
- JSFiddle
- JSBin

以上這些均引入babel.min.js(可能引入的名稱或版本不一樣)通過調用Babel對象提供的各種 API(如transform、disableScriptTags、transformScriptTags...)實現在線實時轉碼.

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>babel-standalone 模擬在線實時轉碼用戶輸入的腳本</title><script src="https://unpkg.com/@babel/standalone@7.12.9/babel.min.js"></script></head><body>輸入:<textarea id="input" style="width: 100%" rows="15">class UserInfo{constructor(name='張三') {this.name = name;}getUserName(){return `${this.name}`;}}const user=new UserInfo('張三');console.log(user.getUserName());</textarea>實時轉碼:<pre id="output"></pre><script>var inputEl = document.getElementById('input');var outputEl = document.getElementById('output');function transform() {try {outputEl.innerHTML = Babel.transform(inputEl.value, {presets: ['es2015',['stage-2',{decoratorsBeforeExport: false,},],],}).code;} catch (e) {outputEl.innerHTML = 'ERROR: ' + e.message;}}inputEl.addEventListener('keyup', transform, false);transform();</script></body> </html>

示例三 import、export 的使用

以上示例都是通過內嵌的方式在頁面直接寫 es6 代碼,但實際開發中有可能需要以外鏈的方式引入腳本,所以我們看會遇到哪些問題.

把示例一從內嵌方式修改為外鏈引入腳本證明沒問題.但我們不止編寫一個 index.js 腳本,對于使用 import、export 這些 es6 語法是否也支持?

首先我們以內嵌方式運行之后拋錯Uncaught ReferenceError: exports is not defined,這里拋出exports未定義而不是 es6 的export未定義,由此說明內部是要把 es6 代碼轉換 CommonJS 模塊規范(印證了前面介紹中提到過的由于 babel 是基于 node 環境下運行),而我們是需要在瀏覽器執行的,所以babel-standalone項目提供的babel.min.js包含了 babel 用到的所有插件(各種特性、規范),可以直接配置為 umd 模式即可.

6.x 版本配置data-plugins="transform-es2015-modules-umd"

7.x 版本配置data-plugins="transform-modules-umd"

既然可以定義export導出那該如何import導入呢?這里babel-standalone又給我們提供了data-module定義導出的模塊名稱,然后導入即可.

這一些似乎都沒發現問題,難道真的沒有什么問題？那直接修改為外鏈的方式呢.

如果仔細看上面這段代碼的話,有沒有發現script標簽內缺少了屬性data-module定義模塊名稱,依然可以正常執行呢?

劃重點,babel.min.js內部獲取script標簽之后對屬性做了判斷,如果有src屬性則使用屬性值作為模塊名稱(如src="./userInfo.js"最終以userInfo作為模塊名稱),如果沒有src屬性則獲取data-module屬性值作為模塊名稱,所以如果使用外鏈方式的話是不需要data-module屬性的(即使配置了也無效).

上面示例演示了 export 可以使用外鏈的方式,那import又如何使用外鏈方式呢?

import 的使用方式同export的方式是一樣的,這樣就完成了以外鏈的方式引入腳本.

問答

感覺示例部分關于import export修改外鏈的方式一直提起有什么問題,結尾也沒發現什么坑?

說這個問題之前,大家是否考慮過如果沒有外鏈引入<script src="./userInfo.js">,只有<script src="./index.js">會怎樣？在index.js內部已經通過import userInfo from 'userInfo';導入,是否可以不需要外鏈的方式引入,如果import導入多個 js 又會怎樣？

穩住.所以拎到問答部分單獨聊...

如上面的示例的,直接外鏈引入index.js,拋出Uncaught TypeError: Cannot read property 'name' of undefined錯誤,原因是userInfo是undefined所以userInfo.name也無法取到值.

那我們就從轉碼開始入手.

// index.js 轉碼之后 (function (global, factory) {if (typeof define === 'function' && define.amd) {define(['userInfo'], factory);} else if (typeof exports !== 'undefined') {factory(require('userInfo'));} else {var mod = {exports: {},};factory(global.userInfo);global.index = mod.exports;} })(typeof globalThis !== 'undefined'? globalThis: typeof self !== 'undefined'? self: this,function (_userInfo) {'use strict';_userInfo = _interopRequireDefault(_userInfo);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}document.getElementById('output').innerHTML = 'Hello '.concat(_userInfo['default'].name);} );

我們對比一下index.js轉碼前后:

| 轉碼前 | 轉碼后 | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | import userInfo from 'userInfo'; | _userInfo = _interopRequireDefault(_userInfo); function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };} |

我們看到轉碼之后的代碼通過_interopRequireDefault(_userInfo)函數對_userInfo重新賦值的操作.(_interopRequireDefault函數的作用判斷對象是否需要添加default屬性).

劃重點:這里插一段為什么會有__esModule和default屬性,首先在本節開頭提到過由于 babel 是基于 node 環境下運行,所以 babel 是要把 es6 的模塊轉換為 CommonJS 的形式,那么就需要了解兩者的區別.

| | 導出 | 導入 | | -------- | ------------------------------- | ------------------------ | | es6 | exportexport default | import {}import | | CommonJS | module.exports | require |

通過對比發現 es6 的導出、導入可以是多種形式,而 CommonJS 則是單一的對象導出、導入.所以 babel 要把 es6 轉換 CommonJS 的形式就需要一些輔助改動.

關于模塊對象添加__esModule屬性,是為了標記此模塊是否被轉碼,如果有此屬性則直接調用模塊(exports)的default屬性導出對象(babel 會把 es6 的export default默認導出對象轉碼為 exports.default的形式,同時這種寫法又符合 CommonJS 的規范module.exports = exports.default),主要是做到 es6 轉碼后與 CommonJS 規范的一致性.

關于default屬性,上面介紹了是有__esModule屬性的情況下,如果沒有__esModule屬性說明沒有對該模塊進行轉換(有可能是一個第三方模塊)對于這種情況直接調用模塊(exports)的default屬性會為undefined,所以這種情況就直接返回一個對象并且該對象添加一個default屬性,把屬性值指向自己(如上面這句轉碼之后的代碼return obj && obj.__esModule ? obj : { default: obj })

快醒醒,這兩個屬性不是這里的重點,還記得問題是什么嗎？userInfo為什么是undefined,看完轉碼之后的代碼,我們只需要知道一點import只是導入而已,至于導入的對象是否存在,是不屬于轉碼的職責所在(轉碼不會檢測導入的對象否存在...),還是繼續查找userInfo在哪里定義的吧...

繼續看轉碼之后的代碼發現在開頭有if...else if...else對各種環境(AMD、CommonJS、UMD)做判斷,由于我們是瀏覽器內執行(UMD 模式),所以進入else里在global.userInfo全局對象上有個userInfo,至此得出一個結論,在外鏈方式引入的腳本內直接使用import導入對象引用,而外部無任何聲明export,此對象是undefined(其實在 AMD 的define(['userInfo'], factory)、CommonJS 的require('userInfo')也是同理).

簡單一句話:無論通過哪種形式引用,必須要聲明,所以外鏈的方式還是需要script聲明.

此處使用的聲明可能用詞不太準確,但相信看到這里應該可以意會到.

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>babel-standalone import、export 的使用</title><script src="https://unpkg.com/@babel/standalone@7.12.9/babel.min.js"></script></head><body><div id="output"></div><scripttype="text/babel"data-plugins="transform-modules-umd"src="./userInfo.js"></script><scripttype="text/babel"data-plugins="transform-modules-umd"src="./index.js"></script></body> </html> // userInfo.js export default {name: '小朋友',age: 18, }; // index.js import userInfo from 'userInfo'; document.getElementById('output').innerHTML = `Hello ${userInfo.name}`; // userInfo.js 轉碼后 (function (global, factory) {if (typeof define === 'function' && define.amd) {define(['exports'], factory);} else if (typeof exports !== 'undefined') {factory(exports);} else {var mod = {exports: {},};factory(mod.exports);global.userInfo = mod.exports;} })(typeof globalThis !== 'undefined'? globalThis: typeof self !== 'undefined'? self: this,function (_exports) {'use strict';Object.defineProperty(_exports, '__esModule', {value: true,});_exports['default'] = void 0;var _default = {name: '小朋友',age: 18,};_exports['default'] = _default;} ); // index.js 轉碼之后 (function (global, factory) {if (typeof define === 'function' && define.amd) {define(['userInfo'], factory);} else if (typeof exports !== 'undefined') {factory(require('userInfo'));} else {var mod = {exports: {},};factory(global.userInfo);global.index = mod.exports;} })(typeof globalThis !== 'undefined'? globalThis: typeof self !== 'undefined'? self: this,function (_userInfo) {'use strict';_userInfo = _interopRequireDefault(_userInfo);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}document.getElementById('output').innerHTML = 'Hello '.concat(_userInfo['default'].name);} );繼上一個問題,如果外鏈引入了userInfo.js但index.js里沒有import userInfo from 'userInfo';又如何呢？

對于這個問題,請品一下,上面對__esModule和default屬性的介紹,就是那段這兩個屬性不是這里的重點,現在是這個問題的答案.

babel-standalone 如何使用多個import export.

其實和上面的示例是一樣的,只需要外鏈多個script即可.

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>babel-standalone 如何使用多個import、export</title><script src="https://unpkg.com/@babel/standalone@7.12.9/babel.min.js"></script></head><body><div id="output"></div><scripttype="text/babel"data-plugins="transform-modules-umd"src="./other.js"></script><scripttype="text/babel"data-plugins="transform-modules-umd"src="./userInfo.js"></script><scripttype="text/babel"data-plugins="transform-modules-umd"src="./index.js"></script></body> </html> // other.js export function random() {return Math.floor(Math.random() * 10); }export const randomStr = '幸運數字:'; // userInfo.js export default {name: '小朋友',age: 18, }; // index.js import { randomStr, random } from 'other'; import userInfo from 'userInfo'; function init() {document.getElementById('output').innerHTML = `Hello ${userInfo.name} ${randomStr} ${random()}`; }init();

補充

對于開發者來說這種直接編寫 es6 代碼實時轉碼比較方便,同時也耗時影響性能,所以開發環境可以使用,對于生產環境還是推薦加載轉碼之后的腳本.

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production——官網建議.

cli

介紹

CLI:命令行界面（英語：Command-Line Interface，縮寫：CLI）是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執行.

關于 CLI 概念可參考維基百科https://bk.tw.lvfukeji.com/wiki/CLI

babel 內置的 CLI, 可直接在命令行轉碼文件.

安裝

安裝 babel cli之前先檢查是否安裝node、npm(前面有提到過 babel 是基于 node 環境下運行,所以自行檢索安裝步驟).

babel cli分為以下兩種安裝方式:

全局安裝:npm install --global babel-cli項目運行需要依賴全局安裝,且如果多個項目依賴的版本不一致的話,無法解決...

局部安裝:npm install --save-dev babel-cli直接在項目內安裝,完全解決全局安裝的問題.

建議局部安裝,且下面的使用示例均為局部安裝.

使用

在介紹使用之前,請先準備好項目環境.

創建項目.

項目中需包含package.json文件(自己新建一個)

關于 package.json的相關配置可參考https://docs.npmjs.com/cli/v6/configuring-npm/package-json

接下來正式進入babel cli的使用.

項目目錄結構如下:

|--babel-cli 項目名稱|-- package.json // package.json {"name": "cli" }

使用命令進入項目 cd babel-cli

執行局部安裝命令 npm install --save-dev babel-cli

安裝完成之后項目目錄結構如下:

|--babel-cli 項目名稱|-- package.json|-- package-lock.json 記錄安裝模塊的版本、來源信息|-- node_modules node 依賴模塊集合|-- babel-cli cli模塊|-- babel-* 以babel開頭的各個模塊后面會介紹 // package.json {"name": "cli","devDependencies": {"babel-cli": "^6.26.0"} }

至此所有的配置、安裝已完成,接下來我們在項目中創建一個腳本文件(script.js),并且執行轉碼.

// script.js const hello = 'Hello';[1, 2, 3, 4].forEach((item) => console.log(item));

執行命令進行轉碼...

轉碼輸出到 stdout(標準輸出).

npx babel script.js

轉碼輸出到指定文件.

npx babel script.js --out-file script-compiled.js

npx babel src --out-dir lib

以上就是關于babel cli的簡單使用,更多配置可參考官網https://babel.docschina.org/docs/en/babel-cli/

問答

全局安裝、局部安裝、npx、 npm 有什么區別?

從安裝方式來說babel cli有兩種(全局安裝、局部安裝)上面提到過,安裝完之后如何執行命令轉碼,同樣也分為兩種:

全局安裝之后直接執行babel命令如(babel script.js),它是找全局node_modules/babel-cli/bin/babel.js執行.

局部安裝之后需要使用npx或npm執行,它則是查找當前項目下的node_modules/.bin/babel命令執行(最終執行的是項目下的node_modules/babel-cli/bin/babel.js),

全局、局部唯一區別是查找的路徑不同.

接下來對比一下npx、npm的區別.

想要使用npm運行命令轉碼則需要配置package.json的scripts對象,關于 scripts的相關配置可參考https://docs.npmjs.com/cli/v6/commands/npm-run-script

// package.json {"name": "cli","devDependencies": {"babel-cli": "^6.26.0"},"scripts": {"babel": "babel script.js","babel-compiled": "babel script.js --out-file script-compiled.js"} }

如上面的使用示例可以通過配置package.json的scripts對象,命令行進入項目目錄,通過執行命令npm run babel 、 npm run babel-compiled實現轉碼.

如果不配置scripts對象就無法使用npm嗎？答案是可以的,使用起來稍微麻煩一點,由于npm是查找的項目目錄下node_modules/.bin/babel命令執行,所以我們可以在命令行手動調用node_modules/.bin/babel scripts.js實現轉碼.

有什么辦法既可以不需要命令行每次都輸入node_modules/...這一堆,也不需要配置scripts對象.答案就是npx,它直接查找項目下的node_modules/.bin對應的命令執行,無需我們手動輸入或配置scripts對象.(不信你看上面的使用部分,就是直接使用的npx).

即安裝了全局,又安裝了局部,npx、npm該如何查找node_modules？

上面的一個問題第 2 點提到查找當前項目下的node_modules這是不嚴謹的,應該是由近到遠,如果項目沒有node_modules模塊集合,才查找全局.

為什么上面的使用示例輸出的代碼沒有轉碼？// 轉碼前 const hello = 'Hello';[1, 2, 3, 4].forEach((item) => console.log(item)); // 轉碼后 const hello = 'Hello';[1, 2, 3, 4].forEach((item) => console.log(item));

這里只對babel cli做一個初步了解,關于(語法、新特性)轉碼、配置文件后面會介紹,另外如果開發工具庫babel cli還是比較適合的.

作為構建工具的插件

介紹

現在一些構建工具集成了 babel 或提供了配置方式,這些插件只是配置方式不同,如同babel cli一樣無論全局、局部(npx、npm)哪種方式最終的轉碼流程都是一樣,所以這里不對插件的配置使用做介紹.

webpack=>babel-loaderhttps://www.webpackjs.com/loaders/babel-loader/

gulp=>gulp-babelhttps://www.npmjs.com/package/gulp-babel

rollup=>rollup-plugin-babelhttps://github.com/rollup/rollup-plugin-babel

未完待續.

總結

以上是生活随笔為你收集整理的babel import语法 js_Babel 的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： linux手动生成dump文件权限不足_
下一篇：网络部署过程中_郑州萤火云SEO网络优化