标签: babeljs

使用karma + babel + webpack运行ES6单元测试.我使用webpack包来定位和转换ES6.这一切都有效,但只要在任何测试文件中出现错误,我都会收到消息,但没有指出错误发生的地方,比如

Uncaught TypeError: Cannot read property 'querySelector' of null
at /pth/to/test.bundle.js:13256

它始终是 /pth/to/test.bundle.js:xxxx.知道如何让它显示更多有用的消息吗？

这是我的配置

module.exports = function(config) {
  config.set({
    browsers: ["Chrome"],
    files: [
      {
        pattern: "test.bundle.js",
        watched: false
      }],
    frameworks: ["jasmine-jquery", "jasmine-ajax", "jasmine"],
    preprocessors: {,
        "test.bundle.js": ["webpack"]
    },
    reporters: ["dots"],
    singleRun: false,
    webpack: {
        module: {
            loaders: [{
                  test: /\.js/,
                  exclude: /node_modules/,
                  loader: "babel-loader?cacheDirectory&optional[]=runtime"
                }]
        },
        watch: true
    },
    webpackServer: {
        noInfo: true
    }
  });
};

还有我的test.bundle.js

var context = require.context("./src", true, /.+(-helpers|\.test)\.js$/);
context.keys().forEach(context);

我已经安装了react-hot-loader并在webpack.config.js中引用了该模块.但是,当我尝试运行webpack来编译脚本时,我收到一个错误.

请看下面的截图.有人可以告诉问题是什么.仅供参考,我正在使用所有最新的图书馆.

 [1]: http://i.stack.imgur.com/2GCa1.jpg

    /*webpack.config.js
    module.exports = {
devtool: 'eval-source-map',
entry: {
    main: [
        './src/main.js'
    ]
},
output: {
    filename: './public/[name].js'
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: ['react-hot','babel-loader'],
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
}

/*UPDATE*/
Code update
I have added an "s" after loader. It is now giving me the below error.

[2]: http://i.stack.imgur.com/LL1nn.jpg

这是我想做的事情的一个例子，目前抛出一个错误。我不确定我明白为什么，但在一行上导出、分配默认值和分配变量在语法上是不正确的。让它成为匿名函数的好处是我可以使用粗箭头=>并使用and 打开返回值，(而)不是打开{和}to return jsx。

export default let Checkbox = (props) => (
  <div style={styles.checkboxContainer}>
    <input styleName={styles.checkbox} type="checkbox" />
    <span styleName={styles.checkboxStyled}></span>
  </div>
)

有没有办法在一行中完成这一切？有没有一个很好的理由为什么我不能/为什么它不在规范中？

我今天早上将我的项目从RN 0.15.0升级到0.16.0,由于传递给Babel 6而出现了很多错误.有一个我不知道的(我猜我的.babelrc文件中缺少了它)

此代码在升级之前工作正常:

'use strict';

import alt from '../alt';
import MeStore from '../stores/Me';

export class MeActions {
 showedCurrentPosition(showed) {
    this.dispatch(showed);
  }
}

export default alt.createActions(MeActions);

这是我使用插件alt的Alt.js文件:

'use strict';

import Alt from 'alt';
export default new Alt();

现在,我在调用时运行代码"this.dispatch不是函数" MeActions.showedCurrentPosition(true);

我正在用es6编写一个浏览器api(用babel翻译).由于其他js将调用我的api,我需要从全局(窗口)范围访问我的api .

使用普通js(es5)中的模块模式,我会做这样的事情:

myApp.js

var myApp = (function(){
    var a, b, c;
    function setA(){
        // set a
    }

    // other functions
    return {
        "setA": setA,
        // ... other functions
    };
}());

myAppExt.js

window.myApp = window.myApp || {};
(function(app){
    app.Module1 = (function(){
        return {
            // methods of this module
        };
    }());
}(myApp));

使用es6我们不应该做这样的事情,但为了实现相同的目标,我正在以这种方式编写我的应用程序:

myApp.js

import method1 from './common/module1.js'
import init from './folder/init.js'
import {method2, method3} from './folder/module2.js'
import log from './common/log.js'

const myApp = {};
window.myApp = myApp;

myApp.method1 …

我正在尝试构建我的应用程序wepback并遇到此unexpected token错误.我的项目的所有依赖项都很好,并且最新我在其他地方使用相同的项目并且它正在构建正常但是当我尝试构建我的当前代码时,它给出了错误,下面是config.js和错误描述

这是我的app.jsx

import React                from 'react';
import ReactDOM             from 'react-dom';
import {Router}             from 'react-router';
import Routes               from '../routes/routes';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { browserHistory }   from 'react-router';

require('../Config');

injectTapEventPlugin();

window.EventEmitter = {
    _events: {},
    dispatch: function (event, data, returnFirstResult) {
        if (!this._events[event]) return;
        for (var i = 0; i < this._events[event].length; i++)
        {
            if(this._events[event][i])
            {
                var r = this._events[event][i](data);

                if(returnFirstResult)   
                    return r;
            }
        }
    },
    subscribe: function (event, callback, onlyOne) {
        if (!this._events[event] || …

好的，我正在学习 react、es6 和 webpack/babel。我在下面设置了我的 webpack.config：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const validate = require('webpack-validator');
const parts = require('./config/webpack-parts');

const PATHS = {
    app: path.join(__dirname, 'app'),
    build: path.join(__dirname, 'build')
};

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: PATHS.app + '/index.html',
    filename: 'index.html',
    inject: 'body'
});

const common = {
    entry: {
        app: PATHS.app

    },

    output: {
        path: PATHS.build,
        filename: '[name].js'

    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    }, …

我正在尝试运行 GraphQL 服务器。我在 GraphQL 中有简单的模式

import {
  GraphQLObjectType,
  GraphQLInt,
  GraphQLString,
  GraphQLList,
  GraphQLSchema
} from 'graphql'
import db from './models'

const user = new GraphQLObjectType({
  name: "user",
  description: 'This represents a user',
  fields: () => {
    return {
        id: {
            type: GraphQLInt,
            resolve(user) {
                return user.id
            }
        },
        firstName: {
            type: GraphQLString,
            resole(user) {
                return user.firstName
            }
        },
        lastName: {
            type: GraphQLString,
            resole(user) {
                return user.lastName
            }
        },
        email: {
            type: GraphQLString,
            resole(user) {
                return user.email
            }
        },
        createdAt: {
            type: …

我是新手做出反应本土的,我正处于创建一个带有Expo的应用程序的早期阶段.我有一个工作的应用程序,直到安装redux.目前我从XDE收到以下错误:

Problem checking node_modules dependencies: Unexpected end of JSON input

以及来自ios模拟器的以下内容:

Building JavaScript bundle: error
TransformError: ../app/main.js: Couldn't find preset "babel-preset-expo" relative to directory "../app/"

我相信我的节点模块包含有效的JSON.应该注意的是,我使用的是当前版本的react-native而不是expo.

在我的Deis应用中收到错误；在前端中间件中引入了头盔（Helmet）。该应用程序最初基于React Boilerplate和我运行过的大多数建议，我已经在源代码中实现/探索过，并且仍然会产生此“幻像”错误。

这仅在Deis应用实例上发生；在本地重现步骤时，完成（生产）构建过程的零问题。

当然，我可以helmet从中间件中删除，但是，我宁愿不...

错误输出：

> pkg-name@0.0.1 start /app
> npm run start:production

> pkg-name@0.0.1 start:production /app
> npm run build && npm run start:prod

> pkg-name@0.0.1 build /app
> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress

/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
        throw e;
        ^
2017-10-27T15:50:48+00:00 deis-app-name[]:
Error: Couldn't find preset "latest" relative to directory "/app"
    at /app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init …