标签: babeljs

在Babel 5.x中,我可以编写以下代码:

app.js

export default function (){}

index.js

require('babel/register');
require('./app')();

然后,我可以运行node index.js没有错误.但是,使用Babel 6.x,运行以下代码

index.es6.js

require('babel-core/register');
require('./app')();

导致错误

require(...)不是函数

我想知道为什么？

我正在运行一个babel cli命令

babel src --out-dir lib

将es6脚本从src复制到lib.但是,它不会复制我在src /文件夹中的css/scss文件.有没有办法让它复制它们？

我正在尝试让我的Browserify/Babelify/Gulp在我的项目中工作,但它不会占用传播操作符.

我从gulpfile中得到了这个错误:

[SyntaxError: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js: Unexpected token (16:8) while parsing file: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js]

这是我的gulpfile.js

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');

gulp.task('build', function () {
  return browserify({entries: './src/client/app.js', extensions: ['.js'], debug: true})
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    .on('error', function (err) {
      console.error(err);
      this.emit('end');
    })
    .pipe(source('app.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js'));
});

gulp.task('default', ['build']);

我试图创建一个.babelrc文件,但它做同样的事情.当我删除传播操作符时,我的脚本工作.

这是发生Unexpected令牌的文件(非常简单).

import utils from '../utils/consts';

const …

我一直在Internet Explorer上测试我的React.js应用程序,令我惊讶的是,ES6代码就像Array.prototype.includes()打破它一样.我正在使用creat-react-app入门套件,我认为babel是其中的一部分,并且它允许我编写ES6代码.

事实证明它并不那么简单.从我所看到的,他们选择不包括大量的polyfill,因为不是每个人都需要它,并且它减慢了构建时间.例如,在此处和此处查看.有人试图记录这一点,但没有提到如何自己实际进行填充.只是这个:

如果您使用任何其他需要运行时支持的ES6 +功能(例如Array.from()或Symbol),请确保手动包含相应的polyfill,或者您所定位的浏览器已经支持它们.

那么......"手动"包含它们的最佳方式是什么？我认为那是babel用于什么的一部分？我应该部分导入babel-polyfill的元素吗？

我看到instanceof操作符在OS X上的babel-node版本6.1.18/Node版本5.1.0 Error下运行时不能处理子类的实例.为什么会这样？相同的代码在浏览器中运行良好,试试我的小提琴.

以下代码true在浏览器中输出,而在babel-node下则为false:

class Sub extends Error {
}

let s = new Sub()
console.log(`The variable 's' is an instance of Sub: ${s instanceof Sub}`)

我只能想象这是由于babel-node中的一个bug,因为它instanceof适用于其他基类Error.

.babelrc

{
  "presets": ["es2015"]
}

编译输出

这是babel 6.1.18编译的JavaScript:

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this …

假设你有一个类似数组的Javascript ES6 Iterable,你事先知道它的长度是有限的,将它转换为Javascript数组的最佳方法是什么？

这样做的原因是许多js库(如下划线和lodash)仅支持Arrays,因此如果您希望在Iterable上使用它们的任何函数,则必须首先将其转换为Array.

在python中,您可以使用list()函数.在ES6中是否有相同的东西？

当我在Django项目中设置React时,我遇到了这个错误

模块构建中的ModuleBuildError失败(来自./node_modules/babel-loader/lib/index.js):SyntaxError:C:\ Users\1Sun\Cebula3\cebula_react\assets\js\index.js:支持实验语法'classProperties '目前尚未启用(17:9):

  15 | 
  16 | class BodyPartWrapper extends Component {
> 17 |   state = {
     |         ^
  18 | 
  19 |   }
  20 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 
'plugins' section of your Babel config to enable transformation.

所以,我安装了@ babel/plugin-proposal-class-properties并把它放在babelrc中

的package.json

{
  "name": "cebula_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config prod.config.js"
  },
  "keywords": [],
  "author": "", …

我用的是需要挂钩的BabelJS(原名6to5)与运行节点的应用程序es6features:

// run.js
require("babel/register");
require("./app.js6");

我打电话node run.js来运行我的app.js6.我需要安装BabelJS并提供run.js每个我想使用es6features项目.我更喜欢这样的电话nodejs6 app.js6.如何独立实现此系统(Unix和Windows)？

我使用多个入口点的webpack配置:

var fs = require('fs');
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js');

module.exports = {
    cache: true,
    entry: {
        main: './resources/assets/js/main.js',
        services: './resources/assets/js/services.js'
    },
    output: {
        path: './public/assets/web/js',
        filename: '[name].[hash].js',
        publicPath: '/assets/web/js/',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'web_modules', 'modules']
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: [/node_modules/, /web_modules/],
            loader: 'babel-loader',
            query: {
                stage: 0
            }
        }]
    },
    plugins: [commonsPlugin,
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery'
        }),
        function() {
            this.plugin('done', function(stats) {
                fs.writeFile('./cache.json', JSON.stringify({ …

我正在使用webpack + babel.我有三个模块看起来像这样:

// A.js

// some other imports here
console.log('A');
export default 'some-const';

// B.js

import someConst from './A';
console.log('B', someConst);
export default 'something-else';

// main.js

import someConst from './A';
import somethingElse from './B';
console.log('main', someConst);

何时main.js执行,我看到以下内容:

B undefined
A
main some-const

如果我交换进口main.js,B成为第一个,我得到:

A
B some-const
main some-const

为什么在第一个版本中B.js获取undefined而不是模块？怎么了？