标签: babeljs

刚刚在 Node.js 中实现了尾调用示例代码，将使用 babel（启用 ES2015 语法支持）进行翻译，但它只是抛出异常Maximum call stack size exceeded。

//index.js
require('babel-core/register');
require('./sample.js');

//sample.js
function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// // but safe on arbitrary inputs in ES6
factorial(100000)

这是我的 babel 依赖。

??? babel-core@6.2.1
? ??? babel-code-frame@6.1.18
? ? ??? chalk@1.1.1
? ? ? ??? ansi-styles@2.1.0
? ? ? ??? escape-string-regexp@1.0.3
? ? ? …

我在我的 React JS 项目中使用 babel-plugin-module-resolver 来导入我的模块（显然，问题也存在于已弃用的 babel-plugin-module-alias ）。

我想对组件使用自动完成和“导入”

有没有办法在 PhpStorm 上设置别名路径？

我的babelrc配置是：

"plugins": [
        [
            "module-resolver", {
            "root": ["./src"],
            "alias": {
                "root_components": "components",
                "root_data": "data",
                "root_entities": "entities",
                "root_library": "library",
                "root_services": "services",
                "root_styles": "styles",
                "root_views": "views"
            }
        }]
    ],

我的js是这样的：

import React from "react";
import Header from "root_components/layout/header";

显然，PhpStorm 无法解析我的头组件的路径......

有什么线索吗？

我有点像webpack.我发现webpack的一些地方是bundler意味着它只是创建了bundle.js文件.在某些地方,我发现webpack也充当模块加载器.它正在加载导入或要求es5语法没有任何加载器.如果webpack解析导入并需要javascript语法,那么babel和babel loader需要什么？

我在下面有这段代码，我正在使用nyc和babel创建覆盖率报告。

出于某种原因，该报告给了我一个问题“没有采取的其他路径”，但我无能为力。

为什么会在这里？我怎样才能让它消失？

我正在从 Apollo 服务器做 GraphQL 教程。现在我尝试从这部分添加批处理 - https://www.apollographql.com/docs/apollo-server/features/data-sources/#batching

我知道我可以在 TypeScript 中使用private。但不知道如何在JS中使用。

据我搜索，我安装了两个 babel 插件，class-properties并且private-methods.

// .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-async-generator-functions"
  ]
}

这是代码：

// .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }], …

注意：代码正在运行，只有 ESLint 给了我一个我想修复的错误！！

进行动态导入时：

if (true) import x from 'y'; //Parsing error: 'import' and 'export' may only appear at the top level

我的.eslintrc

{
  "root": true,
  "extends": "eslint:recommended",
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": 10,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "strict": 0,
    "no-undef": 2,
    "accessor-pairs": 2,
    "comma-dangle": [2, "always-multiline"],
    "consistent-return": 2,
    "dot-notation": 2,
    "eqeqeq": 2,
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-cond-assign": 2,
    "no-constant-condition": 2,
    "no-eval": 2,
    "no-inner-declarations": [0],
    "no-unneeded-ternary": …

我正在尝试使用 Typescript、Webpack 和 Babel 制作一个 React 库，但是遇到了问题。如果我构建然后将库导入到 React 项目中，那么我的导入是“未定义”（请参阅​​下面的错误）。我认为这是因为在 中bundle.js没有module.exports代表我的类的变量，只有 a __webpack_exports__["default"] = (ExampleComponent);（但是我不确定这在实践中会做什么，所以我可能是错的。）

我特别收到这个错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我尝试过的：

• 将 tsconfig 目标更改为 es6，将模块更改为 commonjs
• 将 tsconfig 目标更改为 es6，将模块更改为 esnext
• 将 tsconfig 目标更改为 es5，将模块更改为 esnext
• 将 …

据我了解 ES6 导入，以下是可能的：

import * as name from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";

我想知道是否可以将多个导入别名为这样的对象：

import { export1 , export2 } as name from "module-name";

所以 thatmodule-name的导出可以作为name对象的键访问，如下所示：

name.export1();

我正在使用 Expo 构建一个简单的 React-native 应用程序来对 Github 存储库进行评级，但遇到了一个棘手的问题。当我尝试使用 Flatlist 呈现存储库列表时，它会抛出以下错误： undefined is not an object (evaluating 'repository.fullName'); 尽管我的代码与 React-native 文档中的代码几乎相同。这是渲染 Flatlist 的 RepositoryList.jsx：

import React from 'react';
import { FlatList, View, StyleSheet } from 'react-native';
import RepositoryItem from './RepositoryItem'

const styles = StyleSheet.create({
  separator: {
    height: 10,
  },
});

const repositories = [
  {
    id: 'rails.rails',
    fullName: 'rails/rails',
    description: 'Ruby on Rails',
    language: 'Ruby',
    forksCount: 18349,
    stargazersCount: 45377,
    ratingAverage: 100,
    reviewCount: 2,
    ownerAvatarUrl: 'https://avatars1.githubusercontent.com/u/4223?v=4',
  },
  {
    id: 'reduxjs.redux',
    fullName: 'reduxjs/redux',
    description: …

这个套餐有什么区别？都在做同样的事情？

在这里使用早午餐,但不是早午餐的具体问题.

http://libraries.io/npm/6to5-brunch

http://libraries.io/npm/es6-module-transpiler-brunch

http://libraries.io/npm/babel-brunch

我是 reactjs 的新手，安装了 node.js 和 babel。我不清楚为什么我们在 react 中使用 node.js 和 babel。任何人都知道在 react 中推动我。

由于无法创建箭头生成器函数, 因此从不在箭头函数的上下文中使用yield.

var arrowGenerator = *() => { };

那么你应该能够在生成器函数的上下文中使用yield.就像这样

function* generator() {
    funcWithCallback((value) => {
       yield value;
    });
}

但巴贝尔它使用产量箭头功能的情况下,而不是genreators.

我想这样做,所以你不需要返回一个带有值的回调函数,只是为了产生它.

function* gen() {
    yield function (callback) {
        funcWithCallback(callback);
    } 
}

试图学习React,在他们的官方文档中有一节说明:

"大多数React开发人员使用一种称为JSX的特殊语法,这使得编写这些结构变得更容易."

然后我检查给定的例子:

React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for ",
    props.name
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    ),
    React.createElement(
      "li",
      null,
      "Oculus"
    )
  )
);

29行和470个字符.如何优先使用10行和170个字符的普通常规HTML结构.

<div className="shopping-list">
  <h1>
    Shopping List for {props.name}
  </h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
    <li>Oculus</li>
  </ul>
</div>

JSX版本似乎更复杂,包含所有逗号和引号.是不是因为html的结束标签？