将 hyperhtml 元素与 browserify/babelify 捆绑在一起不起作用

Question

也许我做错了什么，但我似乎无法让 hyperhtml-element 与 babel 一起玩得很好。

如果我从 'hyperhtml-element' 导入 HyperHTMLElement，那么我的包中会得到原始 es6。如果我从 'hyperhtml-element/es5' 导入 HyperHTMLElement 然后我得到 Uncaught TypeError: Super expression must either be null or a function

我正在使用@babel/preset-env

过去几个月我一直在 Electron 应用程序中使用 hyperhtml-element，我很喜欢它。但现在我正试图在网络上使用它，我什至不知道如何捆绑它。我已经尝试完成这项工作将近一个月了。

这是我的gulpfile.js

var gulp = require('gulp')

var browserify = require('browserify')
var watchify = require('watchify')
var babelify = require('babelify')

var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var merge = require('utils-merge')

var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var sourcemaps = require('gulp-sourcemaps')


/* nicer browserify errors */
var gutil = require('gulp-util')
var chalk = require('chalk')

function map_error(err) {
  if (err.fileName) {
    // regular error
    gutil.log(chalk.red(err.name)
      + ': '
      + chalk.yellow(err.fileName.replace(__dirname + '/src/js/', ''))
      + ': '
      + 'Line '
      + chalk.magenta(err.lineNumber)
      + ' & '
      + 'Column '
      + chalk.magenta(err.columnNumber || err.column)
      + ': '
      + chalk.blue(err.description))
  } else {
    // browserify error..
    gutil.log(chalk.red(err.name)
      + ': '
      + chalk.yellow(err.message))
  }

  this.emit('end');
}

gulp.task('watchify', function () {
  var args = merge(watchify.args, { debug: true })
  var bundler = watchify(browserify('./src/js/index.js', args)).transform(babelify, { /* opts */ })
  bundle_js(bundler)

  bundler.on('update', function () {
    bundle_js(bundler)
  })
})

function bundle_js(bundler) {
  return bundler.bundle()
    .on('error', map_error)
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(gulp.dest('build/static/js'))
    .pipe(rename('index.min.js'))
    .pipe(sourcemaps.init({ loadMaps: true }))
      // capture sourcemaps from transforms
      .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/static/js/'))
}

// Without watchify
gulp.task('browserify', function () {
  var bundler = browserify('./src/js/index.js', { debug: true }).transform(babelify, {/* options */ })

  return bundle_js(bundler)
})

// Without sourcemaps
gulp.task('browserify-production', function () {
  var bundler = browserify('./src/js/index.js').transform(babelify, {presets: ["@babel/preset-env"]})

  return bundler.bundle()
    .on('error', map_error)
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(rename('index.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('build/static/js/'))
})

非常感谢您提供的任何帮助

Answer 1

If I import HyperHTMLElement from 'hyperhtml-element' then I get raw es6 in my bundle.

这正是应该发生的事情，对吧？你用的是 ES6 语法，你懂的。

但是你在这里捆绑了 browserify，AFAIK 甚至不理解 ES6，只理解 CommonJS。

因此，如果您想 require CommonJS 的 HyperHTMLElement，您必须更具体一些：

// explicit 
const HyperHTMLElement = require('hyperhtml-element/cjs').default;

如果您的打包器足够聪明，可以自动理解 .default，并且您在幕后进行了从 ES6 到 ES5/CJS 的一些转换，那么您可以尝试以下方法，仍然指向正确的文件夹:

// implicit CJS
import HyperHTMLElement from 'hyperhtml-element/cjs';

如果目标环境是 CJS，两者中的一个肯定可以。

将 hyperhtml 元素与 browserify/babelify 捆绑在一起不起作用

Bundling hyperhtml-element with browserify/babelify not working

javascript

browserify

gulp

babeljs

hyperhtml