Question

尝试设置玩笑以与CSS装饰器一起使用。

链接到我的react组件的css文件具有：

@import './another.css'

现在，当我开玩笑的时候，我得到了：

SyntaxError：/Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css：当前未启用对实验语法'decorators-legacy'的支持（2：1）：

然后我去我的.babelrc并添加：

   "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-decorators", { "legacy": true },
      ]
    }

我又开玩笑了

[BABEL] /Users/thiagofacchini/Documents/atomix/src/library/protons/Animator/tests/index.test.js：装饰器插件需要一个'decoratorsBeforeExport'选项，其值必须为布尔值。如果要使用旧版装饰器语义，则可以设置“ legacy：true”选项。

（而   处理：/用户/thiagofacchini/Documents/atomix/node_modules/@babel/plugin-proposal-decorators/lib/index.js“）

还尝试将.babelrc更改为：

  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true ,"legacy": true },
      ]
    }
  }

但是会得到完全相同的错误。

我的package.json看起来像：

"@babel/core": "^7.3.4",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@logux/eslint-config": "^27.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",

注意：该错误仅发生在JEST上，我的开发版本运行正常。

我在地狱中搜寻，但我根本不了解发生了什么。也许有版本吗？我将不胜感激。

Answer 1

在开发版本中运行应用程序时，构建过程将由webpack / parcel /所用的任何工具来处理。

这些工具可让您（通过使用插件）执行将CSS导入javascript的操作，然后最终在适当的时间将其作为CSS吐出。这不是javascript的本机功能。

Jest在不具有webpack的所有功能并且无法解析原始CSS等的节点js上运行。

因此，当您遇到错误"SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (2:1):"

这实际上是nodejs试图将CSS解析为javascript！尽管您在此处https://www.sitepoint.com/javascript-decorators-what-they-are/

，但可以详细了解其内容

那么您如何在玩笑的环境中管理CSS？

在玩笑配置中进行设置，以便不导入CSS而是导入空白模块。

首先npm install identity-obj-proxy

然后将以下内容添加到您的jest.config.js

moduleNameMapper: {
    "\\.css$": "identity-obj-proxy",
    "^lodash-es$": "lodash"
},

CSS使用@import时，玩笑失败

1 个答案: