Browserify

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 plug-in。警告因为它来自版本 0.5.1 gulp-browserify 不再受支持！！！.此操作的后果和使用 gulp-browserify 进行的编译将导致源代码可能产生错误，例如有问题的错误或类似的错误：Uncaught ReferenceError: require is not defined或者 Uncaught SyntaxError: Unexpected identifier 在你的 import 语句旁边，例如import * from './modules/bar.es6.js';

解决方案

尽管 gulp-browserify 建议 "checkout the recipes by gulp team for reference on using browserify with gulp"。我发现这个建议无济于事。现在（2019 年 7 月 2 日）对我有用的解决方案是用 gulp-bro@1.0.3 plug-in 替换 gulp-browserify。这成功地从 ES6 转换为 ES5（就像现在一样）——它可能会在未来发生变化，因为对 JavaSript 库的支持会随着它出现的时间而衰减。

假设： 要重现此解决方案，您应该安装 docker. Beside that you should be familiar with babel and 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' and 'export' may appear only with 'sourceType: module