gulp:browserify / babelify构建脚本,意外的令牌

我目前正试图通过添加https://github.com/wangzuo/input-moment来增强我的ReactJS应用程序我通过npm install input-moment --save安装了它,并且我使用import InputMoment from 'input-moment'

但似乎我的自定义构建脚本不编译它,但试图直接提供反应式版本。 [编辑:通过React样式的html标签上的编译错误“意外标记”注意到)]]

你能帮我修复我的构建脚本,所以包括未转换的文件也可以工作吗?

这是我的gulpfile.js:

// TODO: Get this to work.
require('app-module-path').addPath(__dirname);

var gulp       = require('gulp');
var source     = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify   = require('babelify');
var watchify   = require('watchify');
var sourcemaps = require('gulp-sourcemaps');
var streamify  = require('gulp-streamify');
var uglify     = require('gulp-uglify');
var sass       = require('gulp-sass');
var gutil      = require('gulp-util');
var notify     = require('gulp-notify');

function handleErrors() {
    var args = Array.prototype.slice.call(arguments);
    notify.onError({
        title: 'Compile Error',
        message: '<%= error.message %>'
    }).apply(this, args);
    this.emit('end'); // Keep gulp from hanging on this task
}

function buildScript(file, watch) {
    var props = {
        entries: ['./app/'+file],
        debug: true,
        transform:  [babelify],
        cache: {},
        packageCache: {},
        fullPaths: true
    };

    // watchify() if watch requested, otherwise run browserify() once
    var bundler = watch ? watchify(browserify(props)) : browserify(props);

    function rebundle() {
        var stream = bundler.bundle();
        return stream
            .on('error', handleErrors)
            .pipe(source(file))
            // .pipe(streamify(uglify()))
            .pipe(gulp.dest('./build/'));
    }

    // listen for an update and run rebundle
    bundler.on('update', function() {
        rebundle();
        gutil.log('Rebundle ...');
    });

    // run it once the first time buildScript is called
    return rebundle();
};

gulp.task('scripts', function() {
    return buildScript('app.jsx', true);
});

gulp.task('sass', function () {
    gulp.src('./assets/sass/**/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(gulp.dest('./build'));
});

gulp.task('sass:watch', function () {
    gulp.watch('./assets/sass/**/*.scss', ['sass']);
});

gulp.task('default', ['scripts', 'sass', 'sass:watch']);

另外,我使用以下.babelrc:

{
  "presets": ["es2015", "react"],
  "plugins": [
    "add-module-exports"
  ]
}

到目前为止,它工作正常,我有很多模块正在运行,但这是第一个似乎在node_modules中未编译的模块。

链接地址: http://www.djcxy.com/p/32967.html

上一篇: gulp: browserify/babelify build script, unexpected token

下一篇: Decorators with babel, unexpected token