Browserify - ParseError：'import'和'export'可能只与'sourceType：module一起出现 [英] Browserify - ParseError: 'import' and 'export' may appear only with 'sourceType: module

问题描述

在我的gulpfile中，我有

  var gulp = require（'gulp'）; 
 var browserSync = require（'browser-sync'）。create（）; 
 var sass = require（'gulp-sass'）; 
 var babel = require（gulp-babel）; 
 var rename = require（'gulp-rename'）; 
 var source = require（'vinyl-source-stream'）; 
 var browserify = require（'gulp-browserify'）; 
 var notify = require（gulp-notify）; 
 
 $ b gulp.task（'js'，function（）{
 gulp.src（'js / main.js'）
 .pipe（babel（） ）
 .pipe（browserify（））
 .on（'error'，errorAlert）
 .pipe（重命名（'./ dist / js / bundle.js'））
（管道（uglify（））
.pipe（gulp.dest（'./'））
 .pipe（notify（{title：Success，message：Well Done！ ，sound：Glass}））; 
 
 
}）
  

和在我的app.js中，我试图导入，但得到错误

 从Simple-断点导入SimpleBreakpoints 
  

任何想法如何摆脱错误并使用导入语法？

编辑：.babelrc

  {
预设值：[es2015 ]，
 
} 
  

解决方案

在您的配置中，您将 js / main.js 传递给Babel，这是唯一将被转译的文件。当Browserify需要 app.js 时，它会看到ES6的内容并会影响您看到的错误。

您可以使用Babelify来解决这个问题。这是一个Browserify转换，可以转发Browserify接收的源。

要安装它，请运行以下命令：

  npm install babelify --save-dev 
  

它将你的任务改为：

$ $ $ $ $ $ $ $ $ $ $ $ $ gulp.task（'js'，function（）{
gulp.src （'js / main.js'）
.pipe（browserify（{transform：['babelify']}））
.on（'error'，errorAlert）
.pipe（rename （'./dist/js/bundle.js'））
//。pipe（uglify（））
.pipe（gulp.dest（'./'））
.pipe （{title：Success，message：Well Done！，sound：Glass}））;
}）

In my gulpfile I have

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var babel = require("gulp-babel");
var rename = require('gulp-rename');
var source =  require('vinyl-source-stream');
var browserify = require('gulp-browserify');
var notify = require("gulp-notify");


gulp.task('js', function () {
    gulp.src('js/main.js')
       .pipe(babel())
        .pipe(browserify())
         .on('error', errorAlert)
        .pipe(rename('./dist/js/bundle.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('./'))
         .pipe(notify({title: "Success", message: "Well Done!", sound: "Glass"}));


})

and in my app.js I am trying to import but get the errror

import SimpleBreakpoints from 'simple-breakpoints'

Any idea how to get rid of the error and use the import syntax?

Edit: the .babelrc

{
    "presets": ["es2015"],

}

解决方案

In your configuration, you pipe js/main.js to Babel, so that's the only file that will be transpiled. When Browserify requires app.js, it will seen ES6 content and will effect the error you are seeing.

You could use Babelify to solve the problem. It's a Browserify transform that will transpile the source that Browserify receives.

To install it, run this command:

npm install babelify --save-dev

And to configure it, change your task to:

gulp.task('js', function () {
    gulp.src('js/main.js')
        .pipe(browserify({ transform: ['babelify'] }))
        .on('error', errorAlert)
        .pipe(rename('./dist/js/bundle.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('./'))
        .pipe(notify({ title: "Success", message: "Well Done!", sound: "Glass" }));
})

这篇关于Browserify - ParseError：'import'和'export'可能只与'sourceType：module一起出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！