在Gulp中浏览

Question

在我的gulpfile中我有

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var babel = require("gulp-babel");
var rename = require('gulp-rename');
var source =  require('vinyl-source-stream');
var browserify = require('gulp-browserify');
var notify = require("gulp-notify");


gulp.task('js', function () {
    gulp.src('js/main.js')
       .pipe(babel())
        .pipe(browserify())
         .on('error', errorAlert)
        .pipe(rename('./dist/js/bundle.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('./'))
         .pipe(notify({title: "Success", message: "Well Done!", sound: "Glass"}));


})

在我的app.js中我试图导入但得到错误

import SimpleBreakpoints from 'simple-breakpoints'

知道如何摆脱错误并使用导入语法吗？

编辑：.babelrc

{
    "presets": ["es2015"],

}

Answer 1

在您的配置中，您将js/main.js传递给Babel，这是唯一将被转换的文件。当Browserify需要app.js时，它会看到ES6内容，并会影响您看到的错误。

您可以使用Babelify来解决问题。这是一个Browserify转换，它将转换Browserify收到的来源。

要安装它，请运行以下命令：

npm install babelify --save-dev

要配置它，请将您的任务更改为：

gulp.task('js', function () {
    gulp.src('js/main.js')
        .pipe(browserify({ transform: ['babelify'] }))
        .on('error', errorAlert)
        .pipe(rename('./dist/js/bundle.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('./'))
        .pipe(notify({ title: "Success", message: "Well Done!", sound: "Glass" }));
})

Answer 2

在Gulp中浏览

对于使用gulp并希望使用browserify将ES6转换为ES5的用户，您可能会偶然发现gulp-browserify插件。警告（来自版本 0.5.1 ）gulp-browserify 已不再被支持！。此操作的后果和使用gulp-browserify进行转译的源代码可能会产生错误，例如所讨论的错误或类似错误：未捕获的ReferenceError：未定义或未捕获的SyntaxError： import 语句旁边的意外标识符，例如import * from './modules/bar.es6.js';

解决方案

Althoutg gulp-browserify推荐为“由gulp团队签出食谱，以供在gulp中使用browserify进行参考” 。我发现这个建议无济于事。现在（2019年7月2日），对我有用的解决方案是将gulp-browserify替换为gulp-bro@1.0.3插件。成功地将ES6转换为ES5（现在）-将来可能会改变，因为对JavaSript库的支持会随着出现的时间而衰减。

假设：要重现此解决方案，您应该已安装docker。除此之外，您还应该熟悉babel和babelify。

源代码

此解决方案已在docker环境中成功复制，运行node:11.7.0-alpine映像。

项目结构

/src                          <- directory
/src/app/foo.es6.js
/src/app/modules/bar.es6.js
/src/app/dist                 <- directory
/src/app/dist/app.es5.js
/src/gulpfile.js
/src/.babelrc
/src/package.json
/src/node_modules             <- directory

步骤1：运行docker映像

$ docker run --rm -it --name bro_demo node:11.7.0-alpine ash

步骤2：创建目录和源文件

$ mkdir -p /src/dist
$ mkdir -p /src/app/modules/
$ touch /src/app/foo.es6.js
$ touch /src/app/modules/bar.es6.js
$ touch /src/gulpfile.js
$ touch /src/.babelrc
$ touch /src/package.json
$ cd /src/

$ apk add vim

.babelrc

{
  "presets": ["@babel/preset-env"]
}

package.json

{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babelify": "^10.0.0",
    "gulp": "^4.0.2",
    "gulp-bro": "^1.0.3",
    "gulp-rename": "^1.2.2"
  }
}

bar.es6.js

"use strict"

class Bar {
  constructor(grammar) {
    console.log('Bar time!');
  }
}

export default Bar;

foo.es6.js

"use strict"

import Bar from './modules/bar.es6.js';

class Foo {
  constructor(grammar) {
    console.log('Foo time!');
  }
}

var foo = new Foo()
var bar = new Bar()

gulpfile.js

const bro = require('gulp-bro');
const gulp = require('gulp');
const rename = require('gulp-rename');
const babelify = require('babelify');

function transpileResources(callback) {
  gulp.src(['./app/foo.es6.js'])
    .pipe(bro({transform: [babelify.configure({ presets: ['@babel/preset-env'] })] }))
    .pipe(rename('app.es5.js'))
    .pipe(gulp.dest('./dist/'));

  callback();
}

exports.transpile = transpileResources;

第3步-将ES6转换为ES5

$ npm install
$ npm install -g gulp@4.0.2

$ gulp transpile
[09:30:30] Using gulpfile /src/gulpfile.js
[09:30:30] Starting 'transpile'...
[09:30:30] Finished 'transpile' after 9.33 ms

$ node dist/app.es5.js
Foo time!
Bar time!

app.es5.js编译后的源代码

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";

var _barEs = _interopRequireDefault(require("./modules/bar.es6.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

var Foo = function Foo(grammar) {
  _classCallCheck(this, Foo);

  console.log('Foo time!');
};

var foo = new Foo();
var bar = new _barEs["default"]();

},{"./modules/bar.es6.js":2}],2:[function(require,module,exports){
"use strict";

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

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

var Bar = function Bar(grammar) {
  _classCallCheck(this, Bar);

  console.log('Bar time!');
};

var _default = Bar;
exports["default"] = _default;

},{}]},{},[1]);

Answer 3

仅切换到Webpack而不是browserify可以解决我的问题。

var webpack = require('webpack-stream')

gulp.task('default', function () {
  return gulp.src('src/source.js')
    .pipe(webpack({
      output: {
        filename: 'app.js'
      }
    }))
    .pipe(gulp.dest('dist/app.js'))
})

Browserify - ParseError：'import'和'export'可能只出现'sourceType：module

3 个答案:

在Gulp中浏览

解决方案

源代码

项目结构

步骤1：运行docker映像

步骤2：创建目录和源文件

第3步-将ES6转换为ES5