摘要:編者按本文主要介紹通過與建立模塊。其中之一就是導入導出模塊的語法被整理為模塊處理的唯一方法。這可以作為依賴這個模塊的某個項目的一部分。創建并初始化這得花點時間。以用戶角度展示系統響應速度,以地域和瀏覽器維度統計用戶使用情況。
【編者按】本文主要介紹通過 ES7 與 Babel 建立 JavaScript 模塊。文章系國內 ITOM 管理平臺 OneAPM 工程師編譯呈現,以下為正文。
去年,新版的JavaScript發布了,它有很多新的優點。其中之一就是導入導出模塊的語法被整理為JavaScript模塊處理的“唯一方法”。好吧,終于等到了。另一樁好事兒是,它的編排方式使你可以靜態分析整棵模塊依賴樹。真是相當厲害。
讓我們來掃一眼這些語法:
import v from "mod"; import * as obj from "mod"; import {x} from "mod"; import {x as v} from "mod"; import "mod"; export var v; export default function f(){}; export default function(){}; export default 42; export {x}; export {x as v}; export {x} from "mod"; export {x as v} from "mod"; export * from "mod";
所以,基本上你可以導入一個模塊(“default”)的主要值,或者導入從顯式導出(explicit exports)而來的一個特定屬性,或者這二者的組合,或者是任何東西。相對應的,你也可以為默認模塊導出一個值,或者帶有多個屬性的對象。你也可以逐個導出這些屬性。最佳風格還是請參考風格指南吧;)
ES7中還加入了一些對這類語法的小補充。
export * as ns from "mod"; export v from "mod";
沒啥特別的,但我們什么時候能使用它們呢?擇日不如撞日吧。就像對待很多ES6的語法特性,如果你目前不打算支持它們,可以用一種叫Babel的工具把它們轉譯回ES5。一旦你準備支持它們了,就可以讓Babel停止轉譯。
讓我們來看一眼具體如何操作。我們將在Node.js與NPM中實現它。試試看執行這個文件;
src/letter_keys.js
// you would have a constant for each key // (I would normally uppercase all constants) const a = 119; const d = 100; const s = 115; const w = 119; // you would export all keys here // note: you can"t say `w: 119` here. It just isn"t valid. // This destructures to `w: w, a: a, ...` export { w, a, d, s, }
src/arrow_keys.js
const UP = 38; const RIGHT = 39; const DOWN = 40; const LEFT = 37; export { UP, RIGHT, DOWN, LEFT, }
src/move.js
export {a, w, s, d} from "./letter_keys"; export * as ARROWS from "./arrow_keys";
我們的設想是,index.js 主文件用于內部模塊內容的導出,它假設這些鍵是從其它文件中導出的。這個例子有點費解,但是這并無大礙。
src/index.js
import * as keys from "./move"; console.log(keys);
這可以作為依賴這個模塊的某個項目的一部分。它應當打印awsd鍵以及箭頭對象。讓我們先從npm開始吧。創建repo dir并初始化:
~$ mkdir foo ~$ cd foo ~/foo$ mkdir src # put src files above in ~/foo/src ~/foo$ npm init -yes ~/foo$ npm install babel-cli babel-preset-es2015 babel-preset-stage-1 -D
這得花點時間。你可能已經猜到了,babel-cli支持從命令行運行Babel (6),并且,babel-preset-stage-1包提供了相關的ES7模塊轉譯工具(在撰寫本文之時)。-yes標記會讓npm創建一個默認的package.json,而不會詢問用戶。-D標記是--save-dev的縮寫,它會在package.json中把包添加到devDependency條目下。現在,把預設參數添加入到默認的babel配置文件中:
.babelrc
{ "presets": ["es2015", "stage-1"] }
如果這能順利運行,那就太好了,擁抱未來吧!但是,在筆者寫本文時,這些示例在ES6中都無法運行,更不用說Node.js了。經過這些轉譯步驟,不管怎樣,它們可以被執行了。
現在還應該有一個幾乎為空的package.json文件,它包含了我們添加的那三個dev 依賴。讓我們給這個package.json 文件加一段腳本,來實現轉譯:
... "scripts": { "test": "echo "Error: no test specified" && exit 1", "translate": "node_modules/babel-cli/bin/babel-node.js src/index.js" }, ...
(僅在“test”那行之后添加“translate”行及逗號)。
這段轉譯腳本是一個編譯步驟。在文章的結尾處,你可以找到本文(正式版本)使用的最終版package.json文件。現在,只剩下調用npm指令來運行腳本,以實現轉譯,并運行我們的代碼了。
~/foo$ npm run translate --silent { A: [Getter], W: [Getter], S: [Getter], D: [Getter], ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }
加油!現在,作為額外獎勵,我們可以使用Jscrambler來“混淆”一下代碼。我們可以傳遞Babel轉譯后的代碼,所以干嘛不這么做呢?
我們(最終的)package.json文件是這樣的:
package.json
{ "name": "foo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "translate": "node_modules/babel-cli/bin/babel-node.js src/index.js" }, "keywords": [], "author": "Your Name(http://localhost/)", "license": "ISC", "devDependencies": { "babel-cli": "6.6.5", "babel-preset-es2015": "6.6.0", "babel-preset-stage-1": "6.5.0", "jscrambler": "0.7.5" } }
像往常一樣完成配置(如果使用的是Node.js,則需要一個專業版賬號)。以下是筆者所用的文件(想深入了解這個文件是如何建立的,可以此為例,點此獲得更多關于NPM的文檔):
.jscramblerrc
{ "keys": { "accessKey": "See https://jscrambler.com/en/account/api_access", "secretKey": "See https://jscrambler.com/en/account/api_access" }, "params": { "constant_folding": "%DEFAULT%", "dead_code": "%DEFAULT%", "dead_code_elimination": "%DEFAULT%", "dictionary_compression": "%DEFAULT%", "dot_notation_elimination": "%DEFAULT%", "function_outlining": "%DEFAULT%", "function-reorder": "%DEFAULT%", "literal_duplicates": "%DEFAULT%", "literal_hooking": "2;8", "member_enumeration": "%DEFAULT%", "mode": "nodejs", "rename_local": "%DEFAULT%", "string_splitting":"0.3", "whitespace": "%DEFAULT%" } }
我們用一段腳本來匯總一下。這段腳本將會用Babel翻譯源文件,輸出到/build文件夾,接著用Jscrambler混淆代碼,再將結果放入/dist文件夾。/dist里的內容可以被正常運行,而不必用到ES7的任何特性。
run.sh
#!/bin/sh echo "Babelifying src/*.js" node_modules/babel-cli/bin/babel.js -d build src/*.js echo "Scrambling build/*.js" node_modules/jscrambler/bin/jscrambler -o dist build/src/** echo "Clean up artifacts" mv dist/build/src/* dist/ rmdir dist/build/src rmdir dist/build echo "Done! See dist/scrambled.js" echo "Running:" node dist/index.js
使之準備就緒:
chmod +x run.sh
接著,運行:
~/foo$ ./run.sh Babelifying src/*.js src/arrow_keys.js -> build/src/arrow_keys.js src/index.js -> build/src/index.js src/letter_keys.js -> build/src/letter_keys.js src/move.js -> build/src/move.js Scrambling build/*.js Clean up artifacts Done! See dist/ for your scrambled files Running: { a: [Getter], w: [Getter], s: [Getter], d: [Getter], ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }
你可以去/dist文件夾查看結果。你會看到,結果和原文件相去甚遠,這是因為我們通過Jscrambler來保護它,但是結果還是可以運行的。
教程到此結束,祝ES7用得開心!
OneAPM 助您輕松鎖定 Node.js 應用性能瓶頸,通過強大的 Trace 記錄逐層分析,直至鎖定行級問題代碼。以用戶角度展示系統響應速度,以地域和瀏覽器維度統計用戶使用情況。想閱讀更多技術文章,請訪問 OneAPM 官方博客。
本文轉自 OneAPM 官方博客
原文地址:https://blog.jscrambler.com/creating-modules-javascript-es7-babel/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79409.html
摘要:使用時也要注意范圍和層級。服務端配置服務端使用,最簡單的方式是通過。云引擎是推出的服務器端運行環境,支持和環境,功能強大而且目前免費,結合,使原本復雜的開發工作變得簡單高效。目前也支持和海外節點,輕松滿足你的業務需求。 構建一個應用程序總是會面對異步調用,不論是在 Web 前端界面,還是 Node.js 服務端都是如此,JavaScript 里面處理異步調用一直是非常惡心的一件事情。以...
摘要:主要功能點語法轉換墊片兼容處理,通過方式在目標環境中添加缺失的特性源碼轉換其他使用理念主要通過插件的形式達到轉換代碼的目的。就是解決這個問題的。 測試環境 node 10.14.1Babel 7.4.3 Babel 是什么? Babel 是一個工具鏈,主要用于將 ECMAScript2015+版本的代碼轉換為向后兼容的 Javascript 代碼,以便能夠運行在當前和舊版本的瀏覽器或其...
摘要:前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解,并且最好帶有一定的技術前瞻性,好的技術架構可能日后會方便的擴展,減少重構的次數,即使重構也不需要大動干戈,我通常選型技術棧會參考以下三點一提出自身業務的需求是 # 前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...
摘要:前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解,并且最好帶有一定的技術前瞻性,好的技術架構可能日后會方便的擴展,減少重構的次數,即使重構也不需要大動干戈,我通常選型技術棧會參考以下三點一提出自身業務的需求是 # 前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...
摘要:前端準備前端了解過關了嗎前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解,并且最好帶有一定的技術前瞻性,好的技術架構可能日后會方便的擴展,減少重構的次數,即使重構也不需要大動干戈,我通常選型技術棧會參考以下三 # 前端準備 :前端了解過關了嗎?前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/...
閱讀 3142·2021-10-08 10:04
閱讀 1080·2021-09-30 09:48
閱讀 3449·2021-09-22 10:53
閱讀 1664·2021-09-10 11:22
閱讀 1682·2021-09-06 15:00
閱讀 2142·2019-08-30 15:56
閱讀 704·2019-08-30 15:53
閱讀 2273·2019-08-30 13:04