javascript - gulp怎么打包js中的import语法

问题描述

问 题

我的gulp配置文件基础是这样的。

const gulp = require('gulp'),
      babel = require('gulp-babel'),
      ugify = require('gulp-uglify')

gulp.task('watch', function () {
  gulp.watch('app.js', ['a'])
})

gulp.task('a', () =>
  gulp.src('app.js')
      .pipe(babel({
        presets: ['es2015']
      }))
      .pipe(ugify())
      .pipe(gulp.dest('dist'))
)

然后我的app.js中用了es6的module语法

import { bar } from './index.js'

var foo = () => {
  console.log(bar)
}

foo()

index.js如下

export const bar = 'aaaaaaaaaaaa'

打包后的js如下，但是这样并不能在浏览器端运行。

"use strict";var _index=require("./index.js"),foo=function(){console.log(_index.bar)};foo();

所以，应该怎么修改呢。

解决方案

babel只能转化，不能打包，你还需要使用browserify这个插件

这篇关于javascript - gulp怎么打包js中的import语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！