我已经添加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部分为什么？

相关问题