5

我正在尝试设置一个带有测试的 React 模块。我正在使用汇总来编译所有内容，效果很好。但我也在尝试引入测试。

我的目录结构：

dist/
  |- index.js
src/
  |- .babelrc
  |- util.js
test/
  |- .babelrc
  |- util.test.js
rollup.config.js

到目前为止，一切都很好。我有一个.babelrc适用于我的源文件的 in src：

{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", { "modules": false }],
    "react"
  ],
  "plugins": ["external-helpers"]
}

和一个单独的用于 Jest 测试的测试，它没有 Rollup 要求的例外：

{
  "presets": ["es2015", "env", "react"]
}

不幸的是，我在运行测试时遇到错误，抱怨它们在源文件 ( SyntaxError: Unexpected token export) 中运行的第一个 es6 功能。如果我删除模块异常，则测试通过，但汇总失败。

如何让 babel 为 Rollup 应用模块异常，但不适用于 Jest？或者我应该以完全不同的方式配置这些？

4

2 回答 2

3

我已经设法解决了这个问题，但我不喜欢它，并且希望有一个更透明的解决方案。

我的test/.babelrc（没有模块例外）现在位于项目的根级别。

在我的rollup.config.js中，我已设置rollup-plugin-babel忽略 babelrc，并为其提供了我的选项src/.babelrc：

babel({
  babelrc: false,
  presets: [
    ['es2015', { modules: false }],
    ['env', { modules: false }],
    'react',
  ],
  plugins: ['external-helpers'],
  exclude: 'node_modules/**',
}),

这似乎可行，但是.babelrc在编译包时实际上没有使用的根级别似乎是后来混淆的秘诀。肯定有更好的方法吗？

于 2017-07-26T12:49:14.890 回答
1

我最近遇到了类似的问题（尽管我没有使用 React），并且将 .babelrc 文件放在 src/ 中产生了同样的错误。

我现在将此配置用于我的项目。自述文件包括解释。

关键特性是我在rollup.config.js 中指定了 babel 配置，并且包含了选项babelrc: false.

运行测试时不再出现错误，并且一切正常。这听起来合理吗？

import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";

export default {
  input: "src/index.js",
  output: [
    {
      file: "build/index.cjs.js",
      format: "cjs"
    },
    {
      file: "build/index.es.js",
      format: "es"
    }
  ],
  plugins: [
    resolve(),
    babel({
      presets: [
        [
          "env",
          {
            modules: false
          }
        ]
      ],
      plugins: ["external-helpers"],
      babelrc: false
    })
  ]
};
于 2017-11-26T14:02:03.020 回答