我已經添加webpacker到我現有的鐵軌應用程序，一切工作就像一個魅力。反應測試設置與鐵軌/網絡包裝

的WebPack配置是

下找到

config/webpack/shared.js 
config/webpack/development.js 
config/webpack/production.js

node_modules安裝在

vendor/node_modules

JS包文件在

app/javascript/packs/application.js

我已經安裝了反應，並寫了一個小部件：

app/javascript/discover/example.jsx

現在我正在努力設置一個工作測試環境。通常我會說通常的測試設置應該包括：karma，jasmine或mocha,webpack。

配置文件應該在哪裏存在？將測試文件存儲在何處，並建立一個karma.config.js以將所有內容捆綁在一起。

如果有一個示例應用程序顯示如何正確執行所有操作，那將是非常好的事情，但我顯然缺乏將所有內容正確連接在一起的必要技能。

這不是一個容易回答的問題，但擁有這樣一個示例應用程序對於很多希望在未來使用webpacker的人會非常有幫助。

感謝有關該主題的任何想法，
喬

一些有用的資源：

來源

2017-02-10 xijo

注：我的經歷來回答這個問題的過程不再必要的，因爲Rails的團隊在默認情況下該項目的moved JavaScript dependencies back into the root。

這個答案是一個單獨的問題。首先，我會解釋一下，經過多少血液，流汗和流淚之後，我到達了當前的Webpacker + React + Jest測試環境。其次，我將深入探討爲什麼所有的體液消耗。

1部分：實現

軌。我生成了一個新的Rails應用程序，跳過了我不太需要的所有事情。

rails new rails-react --skip-action-mailer --skip-active-record --skip-action-cable --skip-javascript --skip-turbolinks

在Rails 5.1發佈之前，我們需要Webpacker。

# Gemfile 
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

然後在你的shell

$ bundle install

設置的WebPack和應對使用Webpacker

$ rails webpacker:install && rails webpacker:install:react

安裝玩笑，而玩笑相關的包

$ bin/yarn add jest babel-jest babel-polyfill react-test-renderer --dev

配置Jest與Webpacker一起玩。 This article關於配置Jest for Webpack是非常有幫助的。根據文檔「<rootDir>」是一個特殊的標記，被Jest替換爲項目的根目錄，大多數情況下這將是package.json所在的文件夾。至關重要的是，這是/vendor而不是/，因爲它將在傳統的JavaScript項目中使用。

// vendor/package.json 
"jest": { 
    // The name of this directive will soon change to "roots" 
    // https://github.com/facebook/jest/issues/2600 
    // This points Jest at Webpacker's default JS source directory 
    "testPathDirs": [ 
    "<rootDir>/../app/javascript/packs" 
    ], 
    // This ensures that node_modules are resolved properly 
    // By default, Jest looks in "/" for this, not "vendor/" 
    "moduleDirectories": [ 
    "<rootDir>/node_modules" 
    ], 
    "moduleFileExtensions": [ 
    "js", 
    "jsx" 
    ] 
}

巴別爾。這個讓我最頭痛。 Babel不支持動態配置（儘管它是currently being considered）。另外，Babel尋找配置的方式並不能幫助我們。「Babel將在當前正在傳輸的文件目錄中查找一個.babelrc文件，如果其中一個不存在，它將沿着目錄樹遍歷，直到找到一個.babelrc或帶有」babel「的package.json： {}中的哈希值。「

巴貝爾尋找預設的方式也很脆弱。你會注意到，the babel-handbook documentation for creating presets包括「簡單地發佈到npm，你可以像使用任何預設一樣使用它」。如果您希望Babel以傳統方式實際找到預設，那麼在node_modules目錄內使用名稱以babel-preset開頭的npm包是沒有其他選擇的。

這意味着我們需要在Rails根目錄下創建一個.babelrc文件，然後使用我們需要的每個插件的完整路徑，相對於該文件而言，而不是您熟悉的簡寫如果您以前使用過Babel（例如"presets": ["react"]指的是node_modules/babel-preset-react）。我.babelrc，下面就using Webpack 2和using babel的玩笑文檔看起來是這樣的：
```
// .babelrc 
{ 
    "presets": [ 
    "./vendor/node_modules/babel-preset-react", 
    "./vendor/node_modules/babel-preset-es2015" 
    ], 
    "env": { 
    "test": { 
     "plugins": [ 
     "./vendor/node_modules/babel-plugin-transform-es2015-modules-commonjs" 
     ] 
    } 
    } 
} 
```
在config/webpack/shared.js刪除babel-loader配置下的options鍵，以便使用的WebPack這個配置文件了。

這將我們帶到現在。我在Jest文檔中實現了基本總和（vanilla JS）和Link（React）測試，並通過在/vendor目錄中執行npm run test來運行它們。你可以在這裏看到我的勞動成果：https://github.com/pstjean/webpacker-jest

第2部分爲什麼？

這不是一件容易的事情。它應該是。我們問題的根源在於Webpacker強加的非常規目錄結構。

最初的理由移動所有的紗線和的WebPack文件/vendor下，根據DHH，在項目的根有這些東西的習慣是不是「一個Rails內同居應用爲重點的JS一個美麗的方式應用」。你可以看到關於提交實現這個here的討論。用戶lemonmade's comment對這個提交做出了預示，我們目前的挫敗感：「這將使得實際配置任何JavaScript工具變得非常困難，並且導致它的行爲與其他使用npm包的項目不同。」

Downthread，DHH表示：「欣賞投入並在我們前進時保持建議，這不是一成不變的，但現在我們將努力做到這一點。」在我看來，這不是成立的，希望Rails團隊能夠在5.1發佈之前意識到這一點。目前有一個very promising pull request在webpacker項目中解決這個問題。讓我們希望它獲得一些牽引力！

來源

2017-02-17 04:49:44 Peter

感謝您的全面回答以及您投入的工作。我們的設置看起來與現在非常相似。也許一篇博客文章總結一下設置將是一個好主意.. – xijo

我仍然抱着希望Rails團隊會添加一個配置選項以允許Rails項目根目錄中的JavaScript依賴項，並且這些信息將會過時。如果這不會發生，博客文章肯定是有條不紊的。 – Peter

看起來他們已經決定將所有內容都移到根目錄下：https：//github.com/rails/webpacker/pull/84#issuecomment-281351614 – Peter

反應測試設置與鐵軌/網絡包裝

回答

1部分：實現

第2部分爲什麼？

相關問題