2015-10-30 69 views
95

我有這樣的代碼:巴貝爾文件被複制而不被轉化

"use strict"; 

import browserSync from "browser-sync"; 
import httpProxy from "http-proxy"; 

let proxy = httpProxy.createProxyServer({}); 

和我已經通過NPM安裝babel-corebabel-cli全球。問題的關鍵是,當我嘗試用這個來編譯我的終端上:

babel proxy.js --out-file proxified.js 

輸出文件被複制,而不是編譯(我的意思是,這是一樣的源文件)。

缺少什麼我在這裏?

+0

請問'let'改變'var'但'import'報表保持? – runspired

回答

151

巴別是一個轉型框架。 Pre-6.x在默認情況下啓用了某些轉換,但隨着Node本身支持許多ES6功能的版本的使用量增加,事情變得可配置變得尤爲重要。默認情況下,Babel 6.x不執行任何轉換。你需要告訴它要運行什麼轉變:

npm install babel-preset-env 

和運行

babel --presets env proxy.js --out-file proxified.js 

或創建.babelrc文件,其中包含

{ 
    "presets": [ 
     "env" 
    ] 
} 

,並運行它,就像你之前。

env在這種情況下是一個預置,它基本上說是將所有標準ES *行爲編譯爲ES5。如果您使用的是支持一些ES6節點版本中,你可能要考慮做

{ 
    "presets": [ 
     ["env", { targets: { node: true } }], 
    ] 
} 

告訴預置不是由您的節點版本只支持過程的東西。如果您需要瀏覽器支持,您還可以在您的目標中包含瀏覽器版本。

+14

這很有用。爲什麼他們不把它放在文檔中?在全球安裝babel-preset是否安全? – kidcapital

+0

@kidcapital文檔包括這個,但只是作爲一個附註。我花了很多時間試圖弄清楚如何在第一次發佈時正確配置babel 6.0。 – nick

+0

這篇文章的要點已經作爲每個[PR#72](https://github.com/babel/babel.github.io/pull/572/files)設置頁面的信息框添加。一個很小的改進,但你必須從某個地方開始!謝謝Logan。 – nick

3

我有同樣的問題不同的原因:

我試圖加載的代碼不在包目錄下,而且Babel不會默認在軟件包目錄之外進行轉譯。

我通過移動導入的代碼解決了這個問題,但也許我也可以在Babel配置中使用一些包含語句。

+0

你能詳細說明一下嗎?我的前端代碼不在「包目錄下」,它工作正常。我的服務器代碼包含「導入」,但babel-cli不解決這些問題... –

+0

嗯,不知道要詳細說明什麼?巴比爾沒有在發生事實。嘗試看看你的所有Babel配置源... – w00t

+0

我試圖解決的問題是,我的服務器文件在幾個文件夾orgnanized:我有servers.js,然後/ api/...東西...當我跑從內存中,這些文件中的每個「導入」或「要求」都是動態解析的。當我從命令行運行babel時,我只輸出一個文件,但不能解析相對導入,所以我不能使用它來運行我的服務器... –

3

首先確保你有以下node modules

npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader

接着,添加到您的WebPack 配置文件(webpack.config.js):

// webpack.config.js 
... 
module : { 
    loaders : [ 
    { 
     test : /\.js$/, 
     loader : 'babel', 
     exclude : /node_modules/, 
     options : { 
     presets : [ 'es2015', 'stage-2' ] // stage-2 if required 
     } 
    } 
    ] 
} 
... 

參考文獻:

祝您好運!

0

同樣的錯誤,不同的原因:

Transpiling曾經工作過,然後突然停止工作,以簡單地原樣複製文件。

原來,我在某個時候打開了.babelrc,Windows決定將.txt附加到文件名。現在.babelrc.txt沒有被babel識別。刪除.txt後綴固定。

0

解決您的.babelrc

{ 
    "presets": [ 
    "react", 
    "ES2015" 
    ] 
}