Babel 基礎

monica888888發表於2017-07-28
Babel

http://babeljs.io/docs/setup/

Babel是一個廣泛使用的ES6轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。大家可以選擇自己習慣的工具來使用使用Babel

一、Using Babel
     根據自己的工具選擇使用Babel   

Choose your tool (try CLI)

Prototyping
In the browser
Babel built-ins
CLI           Require hook
Build systems
Broccoli    Browserify    Brunch     Duo    Gobble     Grunt     Gulp     jspm     Make     MSBuild     RequireS     Rollup       Sprockets   Webpack     Webpack 1       FlyStart
Frameworks
Ember      Meteor         RailsSails
Test frameworks
AVA     Jasmine     Jest     Karma    Lab    Mocha
Utilities
Connect    Nodemon
Language APIs
C# / .NET     Node    Ruby
Template engines
Pug
Editors and IDEs
WebStorm
Debuggers
Node            Inspector

二、當你選擇In the browser

    

安裝

在瀏覽器中編譯，例子有限,因此，如果你已經有了執行的網站，你應該重新編譯你的指令碼服務方， See setup build systems for more information.

你能使用 babel/babel-standalone 作為babel一個重新編譯的版本。

你同時也能使用許多線上的工具去寫一個 指令碼，並轉換:

線上編輯器，執行Babel:

3、使用   With  babel-standalon


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
  <div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "你好！";
document.getElementById('output').innerHTML = getMessage();
</script>
  </body>
</html>

 .babelrc 配置檔案

太好了! 你已經配置Babel,但是你沒有讓它做一些事情，建立一個 .babelrc 配置 ，在你的工程根下且啟用一些外掛plugins.

開始, 你能使用 env preset, 它啟用 ES2015+進行轉碼。

npm install babel-preset-env --save-dev

為了啟用preset，你必須在你的.babelrc file定義它，我是加在package.json裡面，像這樣

{
  "presets": ["env"]
}
注:執行一個Babel 6.x 工程 使用 npm 2.x 能導致效能問題，因為npm 2.x 安裝方式是有依賴的. 
解決辦法，就是換到npm 3.x 或npx 2.x+dedupe 標誌，在執行之前請檢查版本。npm --version



相關文章