2017-07-28 56 views
0

我想編寫一個JavaScript示例並運行它以查看工作原理。編寫需要babel並運行它的javacript的快速方法?

示例代碼可能需要瀏覽器,但並非總是如此。我接受了兩種解決方案,一種與NodeJS一起使用,另一種用於基於瀏覽器的代碼。在瀏覽器中,我使用的是React,和其他ES6語法,包括尚未直接由節點或節點--harmony支持的導入/導出。我可以運行一個命令來編譯文件,然後運行可執行文件(或者只是解釋代碼),所以我正在尋找類似的東西爲Javascript。

從概念上講,我想說:

dotranspile --out bundle.js main.js 
node bundle.js (or firefox index.html, which loads bundle.js) 

的關鍵是,我不希望有建立在每一個目錄中的WebPack配置文件。我以爲我在一天搜索時發現了這樣的命令,但現在找不到它。

當需要使用babel/transpiling時,其他人如何運行javascript示例程序?我也希望能夠保存它們以供將來參考(在某些情況下)。

目前,每次我想編寫一個測試時,我都會創建一個帶有webpack.config文件的package.json文件,並使用npm install和npm run來運行代碼或啓動NodeJS express服務器index.html的。

這似乎是一個快速測試的開銷很大,它會導致數十個node_module目錄中包含大量文件。

+0

爲什麼不重複使用相同的測試目錄(如果僅用於示例程序),或者複製現有的目錄,不得不重新創建? – loganfsmyth

+0

如果我想快速查看某些內容,請轉至https://codesandbox.io/ – marzelin

+0

@loganfsmyth,這會在您有要保存以供將來參考的示例時產生問題。例如,您編寫sample1並將其保存在目錄sample1中。然後2個月後,您想再次運行它。您將其複製到測試目錄,運行它,修改它,並且需要記住將其複製回原來的位置。 Opps我將它複製到錯誤的目錄(sample2)並覆蓋它。我希望sample1和sample2在git/svn中。如果沒有更好的解決方案,這是一個選項。 – PatS

回答

1

也許不是你想要的答案,但你總是可以使用jsfiddle和babel + jsx。我認爲jsfiddle是在babel/jsx或其他庫,轉譯器等中快速運行簡單應用程序的非常好的工具。

+0

使用jsfiddle或codesandbox.io或codepen.io(或其他)有時可以工作,但在需要多個文件時無法工作。例如,要回答「一個模塊被其他幾個模塊導入時模塊是否初始化/加載一次」的問題?這需要多個文件。提到的網站不允許我創建多個文件。不過,我確實很感謝你的回答,我確實有一個JSFiddle登錄。 – PatS

+0

@PatS ok,那麼如何使用plnkr.co? Plunker提供多個文件的支持,並且還可以快速設置包裹,如babel – dfee

+0

plnkr.co感謝您的建議plnkr.co看起來很有前途。我試圖運行一個有多個文件的例子,但無法弄清楚如何讓它運行babel,但我會繼續嘗試。 – PatS