在我正在合作的项目中,我们有两种选择,我们可以使用哪个模块系统:

1. 使用require和导出模块,并使用module.exports和导出exports.foo.
2. 使用ES6导入模块import,并使用ES6导出export

使用一个优于另一个是否有任何性能优势？如果我们使用ES6模块而不是Node模块,还有什么我们应该知道的吗？

我正在尝试使用异步,从零开始等待Babel 6,但我得到的再生器运行时没有定义.

.babelrc文件

{
    "presets": [ "es2015", "stage-0" ]
}

package.json文件

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

.js文件

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

在没有async/await的情况下正常使用它可以正常工作.我有什么想法我做错了吗？

据我所知,在ES7/ES2016中,将多个await代码放在代码中将类似于.then()使用promise 进行链接,这意味着它们将一个接一个地执行,而不是在并行执行.所以,例如,我们有这个代码:

await someCall();
await anotherCall();

我是否理解正确,anotherCall()只有在someCall()完成后才会被调用？并行调用它们的最优雅方式是什么？

我想在Node中使用它,所以也许有一个async库的解决方案？

编辑:我对这个问题中提供的解决方案不满意:由于异步生成器中的非并行等待承诺而减速,因为它使用生成器而我正在询问更一般的用例.

我是React + Webpack的初学者.

我在我的hello world web应用程序中发现了一个奇怪的错误.

我在webpack中使用babel-loader来帮助我将jsx转换为js,但看起来babel无法理解jsx语法.

这是我的依赖项:

"devDependencies": {
  "babel-core": "^6.0.14",
  "babel-loader": "^6.0.0",
  "webpack": "^1.12.2",
  "webpack-dev-server": "^1.12.1"
},
"dependencies": {
  "react": "^0.14.1"
}

这是我的 webpack.config.js

var path = require('path');
module.exports = {
  entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
      loaders: [
          { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
      ]
  }
};

这是我的 app/main.js

var React = require("react");
React.render(<h1>hello world</h1>,document.getElementById("app"));

这是错误信息

ERROR in ./app/main.js
Module build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)
  1 | …

我是webpack的新手,我需要设置一下来生成源图.我正在webpack serve从命令行运行,它成功编译.但我真的需要源图.这是我的webpack.config.js.

var webpack = require('webpack');

module.exports = {

  output: {
    filename: 'main.js',
    publicPath: '/assets/'
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      'webpack/hot/only-dev-server',
      './src/components/main.js'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'styles': __dirname + '/src/styles',
      'mixins': __dirname + '/src/mixins',
      'components': __dirname + '/src/components/',
      'stores': __dirname + '/src/stores/',
      'actions': __dirname + '/src/actions/'
    }
  },
  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'jsxhint'
    }],
    loaders: …

我在ES6中编写了一个简单的组件(使用BabelJS),并且函数this.setState不起作用.

典型的错误包括

无法读取未定义的属性'setState'

要么

this.setState不是函数

你知道为什么吗？这是代码:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

之前,巴贝尔会添加这条线module.exports = exports["default"].它不再这样做了.在我能做之前,这意味着什么:

var foo = require('./foo');
// use foo

现在我必须这样做:

var foo = require('./foo').default;
// use foo

这不是什么大不了的事(我猜它应该一直都是这样).问题是我有很多代码依赖于以前的工作方式(我可以将大部分代码转换为ES6导入,但不是全部转换).任何人都可以给我提示如何使旧的方式工作,而不必通过我的项目并解决这个问题(甚至一些关于如何编写codemod来做这个的说明将是非常光滑的).

谢谢!

例:

输入:

const foo = {}
export default foo

使用Babel输出5

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

使用Babel 6(和es2015插件)输出:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

请注意,输出的唯一区别是module.exports = exports["default"].

编辑

您可能对我在解决我的具体问题后写的博客文章感兴趣:误解ES6模块,升级Babel,眼泪和解决方案

在js文件中,我使用import而不是require

import co from 'co';

并尝试直接由nodejs运行它,因为它说导入是'运输功能'并支持没有任何运行时标志(https://nodejs.org/en/docs/es6/),但我收到一个错误

import co from 'co';
^^^^^^

SyntaxError: Unexpected token import

然后我试着用巴贝尔

npm install -g babel-core
npm install -g babel-cli
npm install babel-core //install to babel locally, is it necessary?

并运行

babel-node js.js

仍有同样的错误,意外的令牌导入？

我怎么能摆脱它？

我目前正在通过webpack/babel在React应用程序中使用ES6.我正在使用索引文件来收集模块的所有组件并将其导出.不幸的是,这看起来像这样:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

所以我可以很好地从其他地方导入它,如下所示:

import { Comp1, Comp2, Comp3 } from './components';

显然这不是一个非常好的解决方案,所以我想知道,如果有任何其他方式.我似乎无法直接导出导入的组件.

我刚接触使用带有React的ES6类,之前我已经将我的方法绑定到当前对象(在第一个示例中显示),但ES6是否允许我使用箭头将类函数永久绑定到类实例？(当作为回调函数传递时很有用.)当我尝试使用它时,我遇到错误,就像使用CoffeeScript一样:

class SomeClass extends React.Component {

  // Instead of this
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  // Can I somehow do this? Am i just getting the syntax wrong?
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }

因此,如果我要传递SomeClass.handleInputChange给setTimeout它,那么它将被限定为类实例,而不是window对象.