标签: gulp-babel

我正在尝试将我的ES6模块导入到一个文件中并运行Gulp来连接并缩小文件.我遇到了一个ReferenceError:在all.js(已编译)第3行没有定义require.我用gulp-babel编译了代码.

我的js文件是:

cart.js:

class Cart{
  constructor(){
    this.cart = [];
    this.items = items = [{
        id: 1,
        name: 'Dove Soap',
        price: 39.99
    },{
        id: 2,
        name: 'Axe Deo',
        price: 99.99
    }];
  }


  getItems(){
    return this.items;
  }


}

export {Cart};

app.js:

import {Cart} from 'cart.js';

let cart = new Cart();

console.log(cart.getItems());

gulpfile.js:

"use strict";

let gulp = require('gulp');
let jshint = require('gulp-jshint');
let concat = require('gulp-concat');
let uglify = require('gulp-uglify');
let rename = require('gulp-rename');
let babel = require('gulp-babel');


// Lint …

我想删除babel-preset-env与babel 6.x一起添加的全局'use strict'.

我读了关于es2015的另一篇文章.

我尝试了以下.babelrc配置,无济于事:

{
  "presets": [["env", {"loose":true}]],
  "plugins": [
    ["transform-es2015-modules-commonjs", {
      "strict" : false
    }]
  ]
}

我不想像在es2015中建议的其他帖子一样编辑node_modules中的实际文件.这是一个非常黑客,不会坚持下去.

到目前为止,唯一的解决方案是使用gulp-iife来包装每个文件.真的没有办法在我的.babelrc文件中传递一个选项来禁用它吗？

'env'中的哪个插件甚至可以这样做？

谢谢

我正在研究JS库,我想将所有用ES6编写的javascript代码转换为ES5标准,以便在当前浏览器中获得更多支持.

问题是我想将Babel与Gulp任务一起使用,所以我已经安装了所有这些NPM包[ package.json]:

"devDependencies": {
  "@babel/core": "^7.1.2",
  "@babel/preset-env": "^7.1.0",
  "babel-cli": "^6.26.0",
  "gulp": "^3.9.1",
  "gulp-babel": "^8.0.0",
  "gulp-concat": "^2.6.1",
  "gulp-sourcemaps": "^2.6.4",
  "gulp-terser": "^1.1.5"
}

接下来我的.babelrc文件包含以下内容:

{
  "presets": ["env"]
}

而gulpfile.js写入如下:

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

gulp.task('minify', function () {
    return gulp.src('src/app/classes/*.js')
        .pipe(sourcemaps.init()) 
        .pipe(babel())     // I do not pass preset, because .babelrc do exist
        .pipe(concat('output.js'))   
        .pipe(sourcemaps.write('.'))   
        .pipe(gulp.dest('build/js'))
});

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

问题是当我 …

运行 gulp 任务时，出现以下错误：

SyntaxError in plugin "gulp-babel"
Message:
    /Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
             ^^^^^^^^^^^^^^

我不知道为什么这是因为我正在运行所需的插件以允许 ES6 导入/导出，或者我想......

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "add-module-exports",
        "@babel/plugin-transform-modules-commonjs",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-export-default-from"
    ]
}

package.json - 我已经包含了完整列表，其中大部分可能无关紧要，但以防万一有任何已知的包冲突。

"dependencies": {
    "@babel/polyfill": "^7.8.3",
    "classnames": "^2.2.5",
    "concurrent-transform": "^1.0.0",
    "deep-freeze": "0.0.1",
    "eslint": "^3.17.1",
    "eslint-plugin-babel": "^3.2.0",
    "eslint-plugin-react": "^6.10.0",
    "git-rev": "^0.2.1",
    "gulp-awspublish": "^4.0.0",
    "gulp-sftp": "^0.1.5",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.26",
    "path": "^0.12.7",
    "qs": "^6.4.0",
    "react": "^16.8.4",
    "react-addons-css-transition-group": "^15.0.2",
    "react-dom": "^16.8.4", …

在node.js项目中使用babel时,我正在尝试将所有文​​件捆绑到一个已编译和缩小的js文件中.

我正在使用gulp-babel 6.1.2运行babel,我已经安装了ES-2015预设(6.13.2).

我正在使用我的文件构建一个包,并且输入0.11.1,问题是当运行gulp任务并通过babel管道时,输入的功能不起作用(Uncaught TypeError:无法设置未定义的属性'Bloodhound').如果我再次运行任务,从管道中删除babel命令,一切正常.

我知道我可以构建两个单独的包,一个用于我的文件,另一个用于外部文件,但我想知道为什么它失败了.

我的任务:

gulp.task('bundleCheckoutDesktopJs', function () {
var js = ['./src/js/project/external/*', './src/js/project/common/*', './src/js/project/*'];

return gulp.src(js)
    .pipe(babel())
    .pipe(concat('project.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('statics/js/'));
});

调查一段时间后我获得的结果(typeahead.js):

(function(root, factory) {
   if (typeof define === "function" && define.amd) {
      define("bloodhound", [ "jquery" ], function(a0) {
          return root["Bloodhound"] = factory(a0);
      });
   } else if (typeof exports === "object") {
      module.exports = factory(require("jquery"));
   } else {
     // Root seems to be undefined here....
     root["Bloodhound"] = factory(jQuery);

   }
})

任何帮助将不胜感激,提前感谢.

我想创建应该在ie11上运行的Web组件。我正在用gulp（和gulp-babel，其中包括babel 7）编译js。

到目前为止，当我使用Babel进行编译时，它可以在Chrome中运行，但是会在ie11：中发送错误Function.prototype.toString: 'this' is not a Function object。

在gulpfile.js中，我有这个：

.pipe(babel({
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "browsers": [
                    "Chrome >= 52",
                    "FireFox >= 44",
                    "Safari >= 7",
                    "Explorer 11",
                    "last 4 Edge versions"
                ]
            }
        }]
    ]
}))

在js中，我有类似这样的内容（我在网上找到了用于测试的示例代码）：

class MyCustomTag extends HTMLElement {
    connectedCallback() {
        this.innerHTML = '<h2>My custom element</h2><button>click me</button>';
        this.style.backgroundColor = 'blue';
        this.style.padding = '20 px';
        this.style.display = 'inline-block';
        this.style.color = 'white';
    }
}

try {
    customElements.define('my-custom-tag', MyCustomTag)
} catch (err) {
    const h3 …

我正在尝试使用gulp-babel,所以我可以开始在我的ES5应用程序中编写一些ES6/ES2015代码.

var gulp          = require('gulp'),
    gutil         = require('gulp-util'),
    gulpif        = require('gulp-if'),
    uglify        = require('gulp-uglify'),
    concat        = require('gulp-concat'),
    sass          = require('gulp-ruby-sass'),
    streamqueue   = require('streamqueue'),
    sourcemaps    = require('gulp-sourcemaps'),
    templateCache = require('gulp-angular-templatecache'),
    htmlReplace   = require('gulp-html-replace'),
    runSequence   = require('run-sequence'),
    stripDebug    = require('gulp-strip-debug'),
    del           = require('del'),
    es            = require('event-stream'),
    webpack       = require('webpack-stream'),
    babel         = require('gulp-babel'),
    browserSync   = require('browser-sync').create();

在我的代码中降低,这就是问题所在:

gulp.task('build-min-bundle', function() {
    gutil.log(gutil.colors.blue.bold(' Compiled bundle file contains these modules:'));
    for (var i=0; i<paths.scripts.length; i++) {
        gutil.log(gutil.colors.yellow.bold('  '+paths.scripts[i]));
    }
    return gulp.src(paths.bundle)
    .pipe(stripDebug())
    .pipe(concat(dist))
    .pipe(babel()) …

我正在尝试创建一个转换的gulp任务

TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]

源映射映射回原始TS代码的位置.

如何用gulp做到这一点？

到目前为止,我已经设法让它发挥作用 TS -> ES6 -> Babel -> ES5

// Build
gulp.task("build", ["clean"], () => {

    const tsProject = ts.createProject("tsconfig.json", {});
    const sourceMapOptions = {
        sourceRoot: __dirname+"/src"
    };

    return tsProject.src()
    .pipe(sourcemaps.init())

        // Typescript
        .pipe(tsProject())
        .js

        // Babel
        .pipe(babel({
            presets: ["es2015"],
            plugins: ["transform-runtime"]
        }))

        // Webpack <-- ????
        .pipe(webpack({})) // <-- ????

    .pipe(sourcemaps.write(".", sourceMapOptions))
    .pipe(gulp.dest("./dist"));

});

但不知道如何添加webpack到混合.

我创建了一个简单的 Gulp 任务来检查 ES6 文件中的更改。我想转译它们并在出现问题时显示错误消息。

正在显示错误屏幕。但是，当一切都成功时，我想显示不同的信息。我尝试了该.on('end')方法，但是当出现一些错误时也会调用该方法。

我当前的 Gulpfile 看起来像这样：

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const pump = require('pump');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass');
const DISTRIBUTION_PATH = 'public/theme/js/app';
const plumber = require('gulp-plumber');
const gutil = require('gulp-util');
const clear = require('clear');

gulp.task('transpile', () =>
    gulp.watch('theme/js/**/*.js', () => {
        return gulp.src('theme/js/**/*.js')
            .pipe(plumber())
            .pipe(babel({
                presets: ['es2015'],
                plugins: [
                    'transform-object-rest-spread'
                ]
            }))
            .on('error', err => {
                clear();
                gutil.log(gutil.colors.red('[Compilation Error]')); …