如何將npmjs.com存儲庫中的React相關節點包轉換為ES5？

Question

作為一個新手，我試圖了解npmjs.com存儲庫中的反應包的邏輯是什么。

我發現它有點奇怪，因為我安裝的某些模塊與我的應用程序完美配合（例如react-motion ），其中一些通過給出Uncaught SyntaxError: Unexpected token import拒絕工作Uncaught SyntaxError: Unexpected token import錯誤（例如react-sortable-pane ）。

我到目前為止所理解的是它與ES5有關。 使用ES6或ES7實現的模塊必須轉換為ES5。

我的問題是，我如何理解一個軟件包是否與ES5兼容，在使用yarn add命令將軟件包安裝到我的node_modules目錄期間或之后，如何將其轉換為ES5？

Answer 1

TL：DR透明你的代碼或使用：

import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5' ;

首先要做的事情。

兩個主要文件夾Src和Lib

javascript項目的一個常見約定是將所有開發代碼放入名為src的文件夾中。 此文件夾可能包含ES5或ES6等代碼，具體取決於開發人員要使用的內容。

另一個主文件夾通常稱為lib ，其中包含來自src所有代碼，這些代碼被轉換（例如從bab6到ES5），轉換並通常捆綁（例如webpack minify），以便它可以在npm包中的瀏覽器中工作支持（明顯不同於包裝）。 此文件夾僅包含與使用該程序包的用戶相關的代碼，即所有測試都不會轉換和捆綁，因為它們沒有理由。

入口點

npm包的另一個重要部分是npm包的入口點。 默認情況下，NodeJS將在導入的包中查找index.js文件（我認為）。 這可以通過在package.json中提供main鍵來覆蓋。

react-motion的package.json中的示例：

"main": "lib/react-motion.js"

我們可以看到這指向了lib 。 但是他們的Github上的lib文件夾在哪里？ 這不是他們的，因為通常你不想在lib文件夾中檢查源代碼控制，因為它只是針對npm包進行了轉換。

我們可以通過安裝react-motion並查看node_modules/react-motion來確認這一點。 這里的lib文件夾存在轉換后的代碼，可以在任何沒有babel的瀏覽器中使用。

但為什么不是所有的npm包都為我做這個！？！??！

大多數人都應該這樣做。 我在我的包里做。

react-sortable-plane npm包正在使用它來代替"jsnext:main": "./lib/react-sortable-pane.js"這基本上意味着它使用ES5語法到處但是有導入/導出而我還沒有看到之前因為它沒有被廣泛使用。

請參閱https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features

至於他們為什么只使用帶有ES5功能的導入/導出，我認為這是因為導入/導出現在已成為標准，但我不確定。

如果您需要較舊的瀏覽器支持或只是導入.es5.js文件，您仍然需要轉換此包，例如：

import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';

希望這可以幫助。 我知道它與如此多的該死的環境如UMD，Common，Node等令人困惑......

Answer 2

解決方案是考慮任何版本的Javascript並使用轉換器來確保您的代碼和導入模塊中的各種JS版本將被您的轉換器配置覆蓋。 瀏覽你的模塊並試圖找出他們使用的Javascript版本不是一個實際的練習。 大多數項目都有一堆依賴項，所有這些包都有自己的依賴項。 所以你最終會走下一個兔子洞。

Babel可能是最着名的轉換器。 使用正確的配置，您可以使用ES5,6或7代碼，並將其全部轉換為相同的JS類型，以便它可以在所有標准瀏覽器版本中運行。

基本上答案不是嘗試和推斷你的模塊是什么ES類型，而是創建一個可以處理不同類型的構建過程。