亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

煦涵說(shuō)Babel

lordharrd / 758人閱讀

摘要：，下一代編譯器，當(dāng)前版本，它可以處理的所有新語(yǔ)法，并內(nèi)置了擴(kuò)展及類型注解支持，如果對(duì)不是很了解可以查看實(shí)驗(yàn)室微信公眾號(hào)文章煦涵說(shuō)。

Babel，下一代javascript編譯器，當(dāng)前版本 v2.4.0 ，它可以處理ES6的所有新語(yǔ)法，并內(nèi)置了React JSX擴(kuò)展及Flow類型注解支持，如果對(duì)Flow不是很了解可以查看FED實(shí)驗(yàn)室微信公眾號(hào)文章煦涵說(shuō)Flow。

Babel與JavaScript技術(shù)委員會(huì)（TC39）始終保持著高度一致，能夠在ECMAScript新特性標(biāo)準(zhǔn)化之前為開(kāi)發(fā)者提供現(xiàn)實(shí)可用的轉(zhuǎn)碼編譯實(shí)現(xiàn)，以在ECMAScript規(guī)范最后定稿前獲得來(lái)自世界各地開(kāi)發(fā)者更多的反饋，從而間接推動(dòng)了javascript的發(fā)展以及開(kāi)發(fā)者在項(xiàng)目中嘗試使用新技術(shù)。因此建議大家開(kāi)始使用 Babel。

Babel 配置文件 .babelrc

學(xué)習(xí)和使用Babel的第一步，配置 .babelrc 文件，該文件存放到項(xiàng)目根目錄下，用來(lái)設(shè)置 Babel 的轉(zhuǎn)碼規(guī)則和插件。基本格式如下：

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

presets的規(guī)則集如下：

# replaces es2015, es2016, es2017, latest
$ yarn add babel-preset-env --dev

# es2015
$ yarn add babel-preset-es2015 --dev

# es2016
$ yarn add babel-preset-es2016 --dev

# es2017 
$ yarn add babel-preset-es2017 --dev

# react
$ yarn add babel-preset-react --dev

# flow
$ yarn add babel-preset-flow --dev

# The TC39 categorizes proposals into the following stages:
# 
# Stage 0 - Strawman: just an idea, possible Babel plugin.
# Stage 1 - Proposal: this is worth working on.
# Stage 2 - Draft: initial spec.
# Stage 3 - Candidate: complete spec and initial browser implementations.
# Stage 4 - Finished: will be added to the next yearly release.
# For more information, be sure to check out the current TC39 proposals and its process document.
# 
# The TC39 stage process is also explained in detail across a few posts by Yehuda Katz (@wycatz) over at thefeedbackloop.xyz: # Stage 0 and 1, Stage 2, Stage 3, and Stage 4 coming soon.

$ yarn add babel-preset-stage-x --dev

plugins插件集合很多。

新建一個(gè)配置文件 .babelrc，并增加如下代碼，以供我們下面調(diào)試使用:

# 新建配置文件.babelrc，并添加如下內(nèi)容
# {
#   "presets": ["es2015"],
#   "plugins": []
# }
$ touch .babelrc
# 安裝 babel-preset-es2015
$ yarn add babel-preset-es2015 --dev
安裝和使用 Babel 
ps: 本文將使用Yarn來(lái)安裝依賴相關(guān)npm包，如果不了解Yarn的歡迎閱讀公眾號(hào)專欄煦涵說(shuō)Yarn。
命令行方式運(yùn)行 babel-cli

babel-cli 的 CLI 是一種在命令行下使用 Babel 編譯文件的簡(jiǎn)單方法。

全局安裝 
# 全局安裝
$ yarn global add babel-cli

新建一個(gè)source.js文件，內(nèi)容如下：

var arr = [1, 2, 3, 4];

arr = arr.map((item, index) => {
    return item * index;
});

console.log(arr);
# 輸出結(jié)果到控制臺(tái)
$ babel source.js

# 輸出結(jié)果到文件
$ babel source.js --out-file dist.js
or 
$ babel source.js -o dist.js

# 輸出結(jié)果到目錄
$ babel /src --out-dir /dist
or 
$ babel /src -d /dist
項(xiàng)目?jī)?nèi)安裝(局部安裝) 
# 初始化一個(gè)項(xiàng)目package.json
$ mkdir first-babel-proj
$ cd first-babel-proj
$ yarn init 
$ yarn add babel-cli --dev

修改package.json，添加如下文本

{
  "name": "babel-proj",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.1"
  },
+  "scripts": {
+   "build": "babel src -d dist"
+  }
}

運(yùn)行

$ yarn run build
require方式運(yùn)行 babel-register 
ps: 這種方法并不適合正式產(chǎn)品環(huán)境使用。 在部署到生成環(huán)境之前預(yù)先編譯會(huì)更好。 不過(guò)用在構(gòu)建腳本或是其他本地運(yùn)行的腳本中是非常合適的。
$ yarn add babel-register --dev

新建compile.js文件

require("babel-register");
require("./src/source.js");

運(yùn)行

node compile.js

運(yùn)行結(jié)果

$ [0, 2, 6, 12]
編程方式運(yùn)行 babel-core 
$ yarn add babel-core --dev

字符串形式的 JavaScript 代碼可以直接使用 babel.transform 來(lái)編譯。

babel.transform("code();", options);
// => { code, map, ast }

如果是文件的話，可以使用異步 api：

babel.transformFile("filename.js", options, function(err, result) {
  result; // => { code, map, ast }
});

或者是同步 api：

babel.transformFileSync("filename.js", options);
// => { code, map, ast }

要是已經(jīng)有一個(gè) Babel AST（抽象語(yǔ)法樹(shù)）了就可以直接從 AST 進(jìn)行轉(zhuǎn)換。

babel.transformFromAst(ast, code, options);
// => { code, map, ast }

更多選項(xiàng) options.

Babel 與 Webpack

使用 babel-loader 插件

$ yarn add bable-loader --dev

webpack.config.js 配置文件增加如下規(guī)則：

{
    test: /.js$/,
    loader: "babel-loader"
}
Babel 低版本瀏覽器兼容

可參考:

煦涵說(shuō)webpack-IE低版本兼容指南，或者FED實(shí)驗(yàn)室公眾號(hào)文章

React - IE低版本兼容

感謝您的閱讀

--eof--

作者[煦涵]
2017年06月03日

下面是「FED實(shí)驗(yàn)室」的微信公眾號(hào)二維碼，歡迎長(zhǎng)按、掃描關(guān)注：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83317.html

相關(guān)文章

  • 煦涵說(shuō)Flow

    摘要：現(xiàn)在已經(jīng)在前端比較流行的等框架中得到使用。今天煦涵就和大家一起來(lái)學(xué)習(xí)以及在實(shí)際項(xiàng)目中的使用。安裝這里我們選擇使用，當(dāng)前你也可以使用如果你對(duì)不是很了解，建議你閱讀煦涵說(shuō)。 Flow是Facebook出品的一個(gè)JavaScript代碼的靜態(tài)類型檢查工具，它做了很多處理，使您的代碼更快，更智能，更自信，更好的適應(yīng)性。現(xiàn)在已經(jīng)在前端比較流行的React 、Vue 等框架中得到使用。今天煦涵就和...

    王偉廷 評(píng)論0 收藏0

  • 煦涵說(shuō)Webpack-IE低版本兼容指南

    摘要：，是一個(gè)前端資源加載打包工具，現(xiàn)在版本已經(jīng)到，今天的文章不支持介紹的及使用，而是對(duì)最近項(xiàng)目開(kāi)發(fā)中使用打包時(shí)處理低版本及以下瀏覽器兼容問(wèn)題做一次總結(jié)。 Webpack，Webpack 是一個(gè)前端資源加載/打包工具，現(xiàn)在版本已經(jīng) release 到 v2.6.1，今天的文章不支持介紹Webpack的API及使用，而是對(duì)最近項(xiàng)目開(kāi)發(fā)中使用Webpack打包時(shí)處理IE低版本(IE8及以下)瀏覽...

    tanglijun 評(píng)論0 收藏0

  • 煦涵說(shuō)JSON

    摘要：對(duì)象表示法，是一種數(shù)據(jù)交換格式，能夠在服務(wù)器端交換數(shù)據(jù)，年由提出，目的是取代繁瑣笨重的格式。煦涵煦涵煦涵煦涵煦涵參考文檔感謝您的閱讀作者煦涵年月日下面是實(shí)驗(yàn)室的微信公眾號(hào)二維碼，歡迎長(zhǎng)按掃描關(guān)注 JSON(Javascript Object Notaion, javascript 對(duì)象表示法)， 是一種數(shù)據(jù)交換格式，能夠在服務(wù)器端交換數(shù)據(jù)， 2001年由Douglas Crockfor...

    lowett 評(píng)論0 收藏0

  • 煦涵說(shuō)Yarn

    摘要：是一個(gè)新的包管理器，它由開(kāi)發(fā)者共同開(kāi)發(fā)完成。從包管理器中借鑒，創(chuàng)建了文件，用來(lái)記錄項(xiàng)目使用每個(gè)包的確切版本。感謝您的閱讀作者煦涵年月日下面是實(shí)驗(yàn)室的微信公眾號(hào)二維碼，歡迎長(zhǎng)按掃描關(guān)注 Yarn是一個(gè)新的Javascript包管理器，它由Facebook, Google, Exponent and Tilde開(kāi)發(fā)者共同開(kāi)發(fā)完成。Yarn 不是 NPM 的fork版本，而是它的重新設(shè)計(jì)，Y...

    pkhope 評(píng)論0 收藏0

  • Babel的使用

    摘要：使用的時(shí)候只需要安裝你想要的階段就可以了然后添加進(jìn)你的配置文件。為了顯出的能耐，我們分別配個(gè)用和支持的先來(lái)配使用的首先安裝然后配置需要注意的是，雖然沒(méi)有出現(xiàn)在配置里，但仍然需要安裝，因?yàn)橐蕾囁? Babel介紹 Babel 把用最新標(biāo)準(zhǔn)編寫(xiě)的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。 這一過(guò)程叫做源碼到源碼編譯， 也被稱為轉(zhuǎn)換編譯。 15 年 11 月，Babel...

    Y3G 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<