gulp怎么打包js中的import语法

radical
  • 676

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

所以,应该怎么修改呢。

回复
阅读 10.1k
6 个回答
✓ 已被采纳

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

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

index.js内容如下:

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

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

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

可以引入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/'));
});

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

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

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

    .pipe(uglify())
    .pipe(concat('lib.min.js'))
    .pipe(gulp.dest('build/js/'))
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏