标签: babeljs

我正在尝试创建一个静态类属性

import 'babel-polyfill';

class Test {
  static name = 'abc';
}

它被打字稿转译为

require("babel-polyfill");

class Test {
}
Test.name = 'abc';

现在，当我使用 babel-node 运行它时，我得到

TypeError: Cannot assign to read only property 'name' of function Test()

我的 babelrc 看起来像这样：

{
  "passPerPreset": true,
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ],
  "plugins": ["transform-class-properties", "syntax-class-properties"]
}

知道可能是什么错误吗？转译后的代码看起来应该有所不同（即我的打字稿配置有问题）还是我缺少另一个 babel 插件？

我试图babel在我的项目中作为构建步骤运行，但它似乎不起作用。

我的package.json看起来像这样：

{
  "name": "module-name",
  "version": "1.0.0",
  "description": "My Module",
  "main": "build/index.js",
  "scripts": {
    "test": "karma start",
    "build": "./node_modules/.bin/babel src -d build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-env": "^1.1.8"
  }
}

并且.babelrc，在同一目录中，看起来像这样：

{
  "presets": ["env"]
}

该命令npm test运行良好并且 Karma 测试运行。但是当我使用 时npm build --verbose，我只得到以下输出：

npm info it worked if it ends with ok
npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'C:\\Users\\Peter\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
npm verb cli   'build', …

我有一个反应组件，我试图将对象传播到构造函数中的状态。

constructor() {
    super()

    const shapesArray = [1, 2, 3]

    let renderStates = shapesArray.map((el, i) => {
        return {['shape'+i]: 'black'}
    })

    this.state = { ...renderStates }
    console.log(this.state)
}

我想通过执行以下操作来访问颜色this.state.shape0，但是当我控制台 log 时this.state，我得到：

代替Object {shape0: "black", shape1: "black", shape2: "black"}。

我在这里做错了什么？

这是我的脚本test.js：

import 'jsdom-global/register';
import 'canvas';
console.log('done');

这是我的 package.json：

{
  "name": "test-jsdom",
  "description": "Test",
  "version": "0.1.0",
  "author": "anthony@me.com",
  "dependencies": {
    "canvas": "^1.6.7"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "jsdom": "^11.3.0",
    "jsdom-global": "^3.0.2"
  }
}

当我运行时npx babel-node test.js，我遇到了这个错误

/Users/antkong/test/node_modules/jsdom/lib/api.js:10
const { URL } = require("whatwg-url");
      ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/antkong/test/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at …

我们的节点环境要求我们的 JavaScript 文件是 babel 的。这很容易。

困难的部分是我们有.js, .jsx, .ts, .tsx文件，这不会改变。

我可以做些什么来将 TypeScript 文件转换为 JavaScript，然后让所有文件.js/.jsx通过 babel 吗？

我当前的命令：

nodemon app.js --exec babel-node --presets env,stage-2,react

我知道我需要在其中的某个地方转换 TypeScript。

有任何想法吗？

节点版本：8.11.1

这：

babel ./src/MyTypescript.ts  --out-dir ./wwwroot/js/

不起作用（没有错误，只是“0 已编译”）。

.babelrc包含 Babel 7 使用 webpack babel loader 编译 typescript 所需的一切：预设“@babel/typescript”和插件“babel-plugin-transform-class-properties”（对我来说适用于当前的 babel 7 rc01）。

我在 Typescript 中遇到了 Mocha 测试的问题，我担心它与 Babel 有关，但我真的不确定发生了什么。

本质上，我有一个正在导出到文件中的函数

// src/my-ts-lib/tests/components/factoryMocks/componentConfigMocks.ts

...

export function getRandomConfig(type?: string): ComponentConfig {
  const randomComponentType = type || randomType();
  return {
    type: randomComponentType,
    config: configLibrary[randomComponentType]
  }
}

并被导入到另一个被测试调用的地方：

// src/my-ts-lib/tests/components/RouteComponent/mocks/routeMocks.ts

...

import { getRandomConfig } from '../../factoryMocks/componentConfigMocks';

..

export const getSingleRouteConfigMock = (componentType?: string): RouteProps => {
  const defaultComponentType = 'PageLayout';
  return {
    childComponent: {
      type: componentType || defaultComponentType,
      config: getRandomConfig(componentType || defaultComponentType)
    },
    pageName: randomString(),
    path: randomString(),
  };
};

...

运行测试时，我收到以下错误：

RouteCompnent/mocks/routeMocks.ts:10
      config: getRandomConfig(componentType || …

背景

我有一个使用create-react-app和打字稿引导的 React 应用程序。随着应用程序的增长，（目标）我想实现绝对导入。我正在使用 VS Code（Visual Studio Code）并且配置很少，我得到了 TS 和 VS Code 来识别我的绝对导入。

对于 TS，我采取了以下步骤tsconfig.json：

• 将“baseUrl”更改为“client”： "baseUrl": "client"
• 将“客户端”添加到我的include密钥中："include": ["./**/*.ts", "./**/*.tsx", "client"]

对于 VS Code，我更改了我的用户设置：Typescript -> Preferences: Import Module Specifier -> non-relative

那效果很好。我所有的进口都使用绝对进口，没有错误。但是，当我运行该应用程序时，出现错误：Error: Cannot find module "component"我希望看到我的应用程序，就像我在绝对导入之前所做的那样。

我试过的

想通了，错误是 webpack 或 babel 问题。

1. 创建的env文件

   将以下内容添加到应用程序根目录中的 env 文件（与我的 package.json 相同的位置）

NODE_PATH=client/

那没有用。同样的错误：Error: Cannot find module "components"。还尝试将 NODE_PATH 更改为 REACT_APP_NODE_PATH 也不起作用。

2. 修改 Babel 配置

   添加了 babel 插件模块解析器 …

我的 Webstorm 中有一个 Node/React 项目，但由于此错误而无法运行。我不得不重新安装 Windows 并重新开始我的开发。我将代码放回到 IDE 中，但是当我启动 Node 服务器时，出现以下错误：TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

该错误的更多上下文：

[nodemon] starting `babel-node src/node-server/index.js`
internal/validators.js:122
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:122:11)
    at Object.join (path.js:375:7)
    at Object.<anonymous> (C:\Projects\Production-Orchestrator\src\node-server\/index.js:17:15)

我去了 index.js，这里是第 1-17 行：

// npm run server
import dotenv from 'dotenv';
import express from 'express';
import path from 'path';
import sql from 'mssql'; …

我是 React 初学者，无法调试错误

这是我在 React 中使用组件的代码。

我正在尝试使用图像、标题和链接模拟 google 搜索图像结果，但在浏览器上我看到的只是一个空屏幕。

错误语句是：

Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.I.render (react-dom.production.min.js:238)
    at <anonymous>:99:10
    at n (babel.min.js:12)
    at r (babel.min.js:12)
    at o (babel.min.js:12)
    at u (babel.min.js:12)
    at E (babel.min.js:1)

该错误未指定哪一行或任何内容。链接说

你刚才遇到的错误全文是：
目标容器不是DOM元素。

Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and …