标签: babeljs

给定一个输入文件

import { a } from 'b';

function x () {
  a()
}

babel会把它编译成

'use strict';

var _b = require('b');

function x() {
  (0, _b.a)();
}

但在松散模式下编译时,函数调用输出为 _b.a();

我已经对添加逗号运算符的位置进行了一些研究,希望有一个解释它的注释.负责添加它的代码在这里.

我刚刚通过运行以下命令升级到Babel 7(从6开始):

npm remove babel-cli
npm install --save-dev @babel/cli @babel/core @babel/preset-env

这是我的.babelrc档案:

{ "presets": ["env"] }

然后我跑了:

babel js/src --out-dir js/dist

它导致:

TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/xyz/node_modules/@babel/traverse/lib/scope/index.js:867:13)
    at BlockScoping.updateScopeInfo (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
    at BlockScoping.run (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
    at PluginPass.BlockStatementSwitchStatementProgram (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
    at newFn (/xyz/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/xyz/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/xyz/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/xyz/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/xyz/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/xyz/node_modules/@babel/traverse/lib/context.js:90:19)

我做错了什么？

其他相关问题中提供的解决方案,例如在.babelrc中包含正确的预设(es2015),已在我的项目中实现.

我有两个项目(让我们称之为A和B),它们都使用ES6模块语法.在项目A中,我正在导入通过npm安装的项目B,它位于node_modules文件夹中.当我为项目A运行我的测试套件时,我收到错误:

SyntaxError:意外的令牌导入

之前是项目B的这个错误的代码行:

(函数(exports,require,module,__ filename,__ dirname){从'history/lib/createBrowserHistory'导入createBrowserHistory;

因为我的源文件只包含"来自'history/lib/createBrowserHistory'的import createBrowserHistory',所以iife似乎是npm或者babel相关的东西; Project B的测试套件中的单元测试运行正常,如果我将Project B作为依赖项从项目A,我的测试套件(仍然使用es6导入内部项目模块)工作正常.

完整堆栈跟踪:

 SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Module._extensions..js (module.js:405:10)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (actionCreators.js:4:17)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/ProjectA/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/ProjectA/src/components/core/wrapper/wrapper.js:28:23)
    at Module._compile (module.js:398:26)
    at loader (/ProjectA/node_modules/babel-register/lib/node.js:130:5) …

我一直在使用babel-node和browserify开发一个带有babelify变换的网站,以支持ES6语法.

我只是想知道,我可以在生产中运行它, babel-node server 而不是 node server 在节点中运行ES6还有什么其他选项吗？

以下是我为构建运行并在开发中启动的命令

// npm run build
browserify -t [babelify] client.js > public/js/bundle.js",

// npm start
babel-node server.js"

这是我的开发依赖项

"babel": "^4.0.1",
"babelify": "^5.0.3",
"browserify": "^8.0.3"

我有一个reactjs使用ES6标准编写的应用程序,我用webpack它来构建它.该webpack负载js使用模块babel-loader.具体来说,我使用以下版本的软件包: ??? babel@5.8.34 ??? babel-core@5.8.34 ??? babel-loader@5.4.0 ??? webpack@1.12.6

但是,在构建它之后,IE 10会出现以下错误'Symbol' is undefined.应该不babel应该定义Symbol？是否有任何特定的配置webpack或babel我需要设置才能使其工作？我{stage: 0}在我的配置中使用配置.babelrc.

任何帮助将不胜感激,谢谢!

尝试使用gulp-babel时出现以下错误:

错误:无法找到相对于目录"/ Users/username"的预设"es2015"

我在全局和本地安装了es2015预设,因此无法理解为什么这会成为一个问题.

下面是我的gulp设置和package.json.

var babel = require('gulp-babel');
var es2015 = require('babel-preset-es2015');

gulp.task('babel', function() {
    return gulp.src('./app/main.js')
    .pipe(babel({
        presets: [es2015]
    }))
    .pipe(gulp.dest('dist'));
});

的package.json

  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-es2015-node5": "^1.1.1",
    "browser-sync": "^2.11.0",
    "gulp": "^3.9.0",
    "gulp-babel": "^6.1.1",
    "gulp-stylus": "^2.2.0"
  }

我使用的是node v5.1.0和babel v6.4.0

这是终端输出

终端输出

每当我webpack在终端跑步时,我得到:

Hash: efea76b1048c3a97b963
Version: webpack 1.12.13
Time: 33ms
    + 1 hidden modules

ERROR in Cannot find module 'babel-core'

这是我的webpack.config.js文件

module.exports = {
  entry: './app-client.js',
  output: {
    filename: 'public/bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /(node_modules|app-server.js)/,
        loader: 'babel'
      }
    ]
  }
}

的package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "React polling app",
  "main": "app-client.js",
  "dependencies": {
    "babel-loader": "^6.2.2",
    "bootstrap": "^3.3.6",
    "express": "^4.13.4",
    "react": "^0.14.7"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && …

我有一个使用 TypeScript、Jest、Webpack 和 Babel 构建的 React 应用程序（不使用 Create React App）。尝试运行“yarn jest”时，出现以下错误：

我尝试删除所有软件包并重新添加它们。它没有解决这个问题。我看过类似的问题和文档，但仍然误解了一些东西。我什至按照另一个指南从头开始设置这个环境，但我的代码仍然收到这个问题。

依赖包括...

"dependencies": {
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.6.0",
        "babel-jest": "^24.9.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.11.0",
        "source-map-loader": "^0.2.4"
    },
    "devDependencies": {
        "@babel/core": "^7.6.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@types/enzyme": "^3.9.2",
        "@types/enzyme-adapter-react-16": "^1.0.5",
        "@types/jest": "^24.0.13",

组件的导入行...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
    Footer,
    Header,
    Navigation,
} from "./components/shared";

测试文件....

import * as React from "react"; …

我正在尝试使用webpack构建一个项目并对此webpack配置做出反应:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './app/less/main.less',
    './app/main.js',
    'webpack-dev-server/client?http://localhost:8080'
  ],
  output: {
    publicPath: '/',
    filename: 'dist/main.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'app'),

        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.less$/,
        loader: "style!css!autoprefixer!less"
      },
    ]
  }
};

我确信我也有所需的pm模块并安装了webpack,但是当运行webpack时,我得到:

Module build failed: ReferenceError: [BABEL] /Users/me/foo/app/main.js: Unknown option: foo/node_modules/react/react.js.Children

有任何想法吗？

我正在使用babel6和我的宠物项目我正在为XMLHttpRequest创建一个包装器,我可以使用的方法:

open = (method, url, something) => {
  return this.xhr.open(method, url, something);
}

但对于属性箭头功能不起作用

这工作:

get status() { return this.xhr.status; }

但我不能用

get status = () => this.xhr.status;

这是故意的吗？