标签: babel

我想让我的第一个Jest Test通过React和Babel.

我收到以下错误:

SyntaxError:/Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less:意外的令牌

    >  7 | @import '../variables.css';
          | ^

我的package.json配置为jest看起来像这样:

"babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": [
      "syntax-class-properties",
      "transform-class-properties"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "verbose": true,
    "modulePathIgnorePatterns": [
      "rpmbuild"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/core-js"
    ]
  },

那我错过了什么？

最新的React 15.5.1包,如果使用babel react present来解析jsx文件,将出现以下警告:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

warning.js:36 Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

我的代码如下:

import React from 'react'
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  } …

当我按照其他类似的报告时,无论我尝试安装(babel明智),都会继续收到此错误.这是堆栈跟踪:

error: bundling failed: Error: Requires Babel "^7.0.0-0", but was
loaded with "6.26.3". If you are sure you have a compatible version of
@babel/core, it is likely that something in your build process is
loading the wrong version. Inspect the stack trace of this error to
look for the first entry that doesn't mention "@babel/core" or
"babel-core" to see what is calling Babel. (While processing preset:
"C:\\Users\\Admin-ESS\\Absent\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at throwVersionError (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:65:11)
    at Object.assertVersion (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:13:11)
    at _default (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\lib\index.js:150:7)
    at C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\options\option-manager.js:317:46 …

Run Code Online (Sandbox Code Playgroud)

我对保留关键字"this"的错误感到困惑.在我的React组件中,下面显示我从一个状态从我的主要组件"App.js"传递到我的"RecipeList.js"组件,然后映射数据并渲染每个RecipeItem组件.我只是不明白为什么我会收到这个错误

React.js - 语法错误:这是一个保留字

在render return方法中的RecipeList中调用错误; 如果有人能提供帮助那就太好了!

谢谢

App.js

//main imports
import React, { Component } from 'react';

//helper imports
import {Button} from 'reactstrap'
import RecipeItem from './components/RecipeItem';
import RecipeList from './components/RecipeList';
import './App.css';

const recipes = [
  {
    recipeName: 'Hamburger',
    ingrediants: 'ground meat, seasoning'
  },
  {
    recipeName: 'Crab Legs',
    ingrediants: 'crab, Ole Bay seasoning,'
  }
];

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      recipes
    };
  }

  render() {
    return (
      <div className="App">
        <div className = "container-fluid"> …

我正在尝试用装饰器构建JS反应项目.我的.babelrc看起来像这样:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",

  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-object-assign",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

添加@ babel/plugin-proposal-decorators问题再次出现.

我使用babel 7,webpack 4并做出反应16.5

webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const componentName = "reports-desktop";
const publicFolderRelativePath = "../../../../../../public/js";
const ignorePlugin = new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/);

module.exports = {
    entry: './reports-desktop.js'
    ,
    output: {
        path: path.resolve(__dirname, publicFolderRelativePath),
        filename: `${componentName}.js`
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader" …

请考虑以下两个文件:

app.js

import Game       from './game/game';
import React      from 'react';
import ReactDOM   from 'react-dom';

export default (absPath) => {
  let gameElement = document.getElementById("container");

  if (gameElement !== null) {
      ReactDOM.render(
          <Game mainPath={absPath} />,
          gameElement
      );
  }
}

index.js

import App from './src/app';

该 gulpfile.js

var gulp        = require('gulp');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var babelify    = require("babelify");
var watch       = require('gulp-watch');

gulp.task('make:game', function(){
  return browserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(source('index.js'))
  .pipe(gulp.dest('app/'));
});

错误:

gulp make:game …

我正在使用ESLint与Airbnb插件(eslint-config-airbnb)和Babel解析器.我刚刚添加了使用Tab字符代替空格的额外规则.

这是我的.eslintrc:

{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules":{
        "indent": [2, "tab"]
    }
}

现在我在每个缩进处都会收到此错误:

Error: Unexpected tab character

万一有帮助,我使用的Atom IDE与autolinter插件linter和linter-eslint.

我的package.json的设置如下

如果我从命令行运行npm test所有jest测试用例都正确执行.如果我直接从命令行使用命令jest,我收到此错误:

测试套件无法运行

TypeError: Path must be a string. Received undefined

  at assertPath (path.js:7:11)
  at Object.relative (path.js:538:5)

Run Code Online (Sandbox Code Playgroud)

这发生在任何测试文件上.

知道什么可能是错的,以及如何解决它？

 "scripts": {
        "test": "standard && jest",
        "format": "standard --fix",
        "start": "webpack-dev-server --config webpack.config.dev.js",
        "build": "webpack --config webpack.config.prod.js"
    },

我一直在使用巴贝尔有一段时间了,而我一直的印象是,巴贝尔是下transpiler转换器ES6我和ES7的JavaScript到ES5的JavaScript,因为我的假设是,你可以在技术上治疗ES5和ES6作为两种不同的语言.

然而,我不禁注意到,巴贝尔的网站标题描述它作为一个编译器,我相信这是东西从一个非常不同的transpiler.

Babel是一个转换器还是编译器,或者可能提供两种选择？或者网站的标题是不正确的？

披露:我知道这听起来像是一个非常迂腐的问题,但我正在编写有关Babel的文档,我想确保我的描述准确无误

我一直在使用异步等待我的ReactJS项目中的babel.我发现使用React setState很方便,我想更好地理解.考虑以下代码:

handleChange = (e) => {
  this.setState({[e.target.name]: e.target.value})
  console.log('synchronous code')
}

changeAndValidate = async (e) => {
  await this.handleChange(e)
  console.log('asynchronous validation code')
}

componentDidUpdate() {
  console.log('updated component')    
}

我的目的是在组件更新后运行异步验证代码.它的工作原理!生成的控制台日志显示:

synchronous code
updated component
asynchronous validation code

验证代码仅在handleChange更新状态并呈现新状态后运行.

通常在状态更新后运行代码,您必须在this.setState之后使用回调.这意味着如果你想在handleChange之后运行任何东西,你必须给它一个回调参数,然后传递给setState.不漂亮.但是在代码示例中,await知道在状态更新后,handleChange已经完成了...但我认为await只适用于promises并等待承诺在继续之前解决.在handleChange中没有承诺和解决方案......它怎么知道等待什么？

暗示似乎是setState以异步方式运行,并且await以某种方式知道它何时完成.也许setState在内部使用promises？

版本:

反应:"^ 15.4.2"

babel-core:"^ 6.26.0"

babel-preset-env:"^ 1.6.0",

babel-preset-react:"^ 6.24.1",

babel-preset-stage-0:"^ 6.24.1"

babel-plugin-system-import-transformer:"^ 3.1.0",

babel-plugin-transform-decorators-legacy:"^ 1.3.4",

babel-plugin-transform-runtime:"^ 6.23.0"