gulp怎么打包js中的import语法

Question

我的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();

所以，应该怎么修改呢。

Answer 1

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

Answer 2

可以看看gulp-js-import这个gulp插件，允许你用类似css的@imprt语法引入其他js文件。
比如:

index.js内容如下：

// index.js
@import './widget/widget.js'
output(config);

这样会直接把相对./widget/widget.js的文件引入到index.js中，编译以后会合并两个文件。

而且widget.js中还可以继续引用其他文件，蛮强大的

Answer 3

可以引入webpack来打包js，webpack的文档中有介绍如何将webpack添加到gulp的流程中：Integrations
先安装依赖：

npm install --save-dev webpack-stream

gulpfile.js

var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(webpack({
      // Any configuration options...
    }))
    .pipe(gulp.dest('dist/'));
});

Answer 4

gulp不是模块化开发工具，不能把你需要的资源打包。

Answer 5

import的支持需要增加plugin。 https://babeljs.io/docs/plugins/

Answer 6

你应该想实现的是app.js 和index.js 打入一个包中吧？

gulp.src(['app.js','index.js'])

    .pipe(uglify())
    .pipe(concat('lib.min.js'))
    .pipe(gulp.dest('build/js/'))