資訊專欄INFORMATION COLUMN
摘要：，標題黨了，本文僅介紹相關生態和一些配置心得。函數是在時候常用的工具函數，對編譯模塊時，會將用到的放到模塊頂部。用來看最終引入了哪些必須配合，貌似加入了此項以后，會得到類似于的效果。
Babel
Sorry，標題黨了，本文僅介紹 Babel 相關生態和一些配置心得。
Babel 各個 package 的用途babel-core: 核心部分
babel-cli: 允許使用命令行
babel-node: babel-node 直接執行 es6/jsx 文件，自動加載 polyfill
babel-register: 以文件形式實現 babel-node 功能，多用于實時編譯
// 以下相當于 babel-node ./test --presets react
require("babel-register")({ presets: ["react"] });
require("./test")
babel-plugin-external-helpers: 把 helpers 收集到一個共享模塊或共享文件。
helper 函數是 babel 在 transform 時候常用的工具函數，對編譯模塊時，會將用到的 helpers 放到模塊頂部。如果編譯多個文件，就會重復引用，導致每個模塊都定義一份。
babel-runtime: polyfill （內含 core.js 和 regenerator）、helpers 集合
babel-polyfill: 和 babel-runtime 類似，但直接整體引入目標環境中
babel-plugin-transform-runtime: 和 babel-polyfill 一樣，但是不是一次性引入全部 polyfill，而是根據你該文件用到多少，引多少
對比上述兩種 polyfill 方案，寫庫用 transform-runtime，寫應用就 babel-polyfill
babel-polyfill 優點是全面，反過來說就是污染原生、增大體積
transform-runtime 優點是按需，純凈，不會污染原生，但會拖慢編譯速度
stagestage-x 是會根據 tc39 動態調整的
stage-0 > stage-1 > stage-2 > stage-3
比如你引入了 stage-1，自動包含了 stage-2 和 stage-3
基本都是使用 preset-env + 幾個 stage，一般來說到 stage-2 就可以了。
babel-preset-envdebug: 用來看最終引入了哪些 polyfill、plugins
useBuiltIns: 必須配合 babel-polyfill，貌似加入了此項以后，會得到類似于 babel-plugin-transform-runtime 的效果。但是根據實驗得出，還是 transform-runtime 在減肥上的效果更好。而且它不處理 helpers，你還是不能省略 external-helpers 這個插件
modules: 是否編譯模塊導入導出語句
webpack 和 rollup 都可以對 es 模塊做 Tree Shaking，所以要設置 modules 為 false
loose: 寬松模式，編譯的結果在運行時，其內部并不嚴格遵循 es6 標準
通過減少判斷和限制，有效提高效率甚至包體積
exclude/include: 編譯時排除或使用某插件
env這個 env 和上面那個不同... 這里的 env 是指，一個 babel 文件針對不同環境（讀取 NODE_ENV、BABEL_ENV），做不同配置
{
"env": {
"development": {
"presets": [
[
"env",
]
]
},
"production": {
...
}
}
}
好用的 plugins 和 presets
babel-plugin-transform-remove-console
生產時，代碼中應該不包含 console.log。
babel-plugin-transform-decorators-legacy
裝飾器
babel-preset-minify
用于生產時壓縮代碼，包括前述的 remove-console。但是沒有 uglify 牛逼。
babel-preset-react 已經包含了一組 plugins
preset-flow: 編譯 flow
syntax-jsx: 識別 jsx 語法
transform-react-jsx: 編譯 jsx
transform-react-display-name: 自動添加組件的 displayName
但上面這些只是滿足基礎編譯而已，你額外可以添加下面這個 preset 提高 React 應用的性能
npm i babel-preset-react-optimize
項目主頁有詳細的說明，簡要概括下
transform-react-constant-elements
識別并轉換可以轉成常量的組件
transform-react-remove-prop-types
刪除 propTypes
transform-react-pure-class-to-function
盡可能把 class 組件轉為 functional 組件
你真的會用 Babel 嗎?
React Plugins · Babel
thejameskyle/babel-react-optimize: A Babel preset and plugins for optimizing React code.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90266.html
摘要：兩種格式對象對象是一個無序的名稱值對集合。數組數組是值的有序集合。值之間使用逗號分隔。這兩個方法分別用于把對象序列化為字符串和把字符串解析為原生值方法用于將字符串轉化成對象對應的表示利用將對象轉換成字符串 JSON簡介 簡介：JSON（JavaScriptObject Notation）、輕量級數據交換格式、非常適合于服務器與 JavaScript 的交互。 JSON兩種格式： 1、對...
摘要：輸出和字符串大小寫轉換方法，和是針對特定地區的實現。輸出輸出輸出輸出基于指定的分割符將一個字符串分割成多個子串。 1 初始化 //常用初始化方法 var stringVal = hello iFat3; //構造函數創建方法 var stringObj = new String(hello iFag3); 2 length屬性 var stringVal = hello iFat3; ...
摘要：原文地址原文作者翻譯作者是在版本中引入的，它對于中的異步編程而言是一個巨大的提升。可能會產生誤導一些文章把和進行了比較，同時說它是異步編程演變過程中的下一代解決方案，對此我不敢茍同。結論在中引入的關鍵字無疑是對異步編程的一大加強。 原文地址: https://hackernoon.com/javasc...原文作者: Charlee Li 翻譯作者: Xixi20160512 asy...
閱讀 573·2021-11-18 10:02
閱讀 1054·2021-11-02 14:41
閱讀 679·2021-09-03 10:29
閱讀 1896·2021-08-23 09:42
閱讀 2735·2021-08-12 13:31
閱讀 1203·2019-08-30 15:54
閱讀 1958·2019-08-30 13:09
閱讀 1431·2019-08-30 10:55
