小编Jer*_*ome的帖子

我启动了一个新的反应项目,并且我使用Jest作为测试平台.尽管文档,博客和许多其他资源,如stackoverflow,我总是有一个"意外的令牌导入"错误可能与babel问题有关,但我的conf似乎没问题.欢迎任何帮助.

我的Jest conf(在package.json中).我的package.json有依赖,如babel-jest,babel-preset-es2015,babel-preset-react等.

 "jest": {
    "testMatch": [
      "**/?(*.)spec.js?(x)"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "^lib/(.*)$": "<rootDir>/src/lib/$1",
      "^components/(.*)": "<rootDir>/src/components/$1",
    },
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }

我的.babelrc conf:

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    ["react-hot-loader/babel"],
    ["transform-object-rest-spread", { "useBuiltIns": true }],
    ["transform-runtime"]
  ],
  "env": {
      "test": {
        "presets": ["es2015", "react"]
      }
  } 
}

我的spec文件:

import React from 'react';
import Radio from 'components/ui/radio';
...

和components/ui/radio(第一行引发导入错误):

import Container from './container.jsx';
...

我的webpack有两个名为lib和components的别名(在jest中定义为moduleNameMapper).

...
resolve: {
   mainFiles: ['index', …

这是否可以将内联 SVG 作为组件道具（而不是作为组件子组件）传递。我尝试了类似下面的方法，但这不起作用：

 mySvg1() {
   return (<svg xmlns="... ></svg>);
 }

 render() {
   <AnotherComponent icon={this.mySvg()} />
 }

我已将 lerna 设置切换为使用 Yarn Workspace。现在我有一个包含所有包依赖项的根 node_modules。每个包中的 node_modules 只有一个 .bin 文件夹。

使用此设置，webpack 无法解析依赖项。我需要像这样更改我的配置文件：

resolve: {
  symlinks: false, <-- +
  modules: [
    helpers.getPath('src'),
    helpers.getPath('node_modules'),
    helpers.getPath('../../node_modules'),  <-- +
  ]
  ...others settings...
}

关于这个设置的两个问题：

• 为什么我需要添加符号链接属性？我有很多错误没有。

• 这是工作区在 webpack 中添加相对解析器的正常行为吗（我有一些包裹在 dotnet 解决方案中的包，我需要添加一个非常长的相对路径，如 ../../../../.. /../node_modules) ?

当我使用 Webpack 别名时，我遇到了 @use 规则的问题。

在部分 theme.scss 中，我尝试使用 style.scss 中的 mixin。

/src/assets/css/_theme.scss\n/components/UI/Button/_style.scss\n/components/UI/Button/main.tsx\n/components/UI/Radio/_style.scss\n/components/UI/Radio/main.tsx\n

这适用于相对路径：

@use '../../components/UI/Button/style' as button;\n

但不能使用如下别名：

@use 'Components/UI/Button';\n@use 'Components/UI/Button/style';\n

在第二种情况下，我收到此错误：

SassError: SassError: Can't find stylesheet to import.\n1 \xe2\x94\x82 @use 'Components/UI/Button';\n

别名已在 tsconfig.json 中声明

"baseUrl": "./",\n"paths": { "Components/*": ["src/components/*/main"] }\n

并在我的 Webpack 配置中使用 TsconfigPathsPlugin ：

resolve: {\n    ...\n    plugins: [new TsconfigPathsPlugin()],\n}\n

我在 sass-loader 中没有找到任何用于特定解析的选项。如何在 saas-loader 中使用别名？

Sass-loader 似乎不使用打字稿配置中声明的路径（别名）。因此，简单的 @use 或 @import 会给出未找到的错误。

网页包

resolve: {\n    plugins: [new TsconfigPathsPlugin()],\n

tsconfig

"paths": {\n    "Components/*": ["src/components/*"],\n

结果

SassError: SassError: Can't find stylesheet to import.\n1 \xe2\x94\x82 @use 'Components/UI/Grid';\n

是否可以在 sass-loader 中导入 tsconfig 路径？

原子设计似乎是一种构建用户体验结构的有趣方法。但是一种生物可以包含其他生物吗？