包括Jotted的Codemirror插件與角度吞噬

Question

我想使用Jotted JavaScript庫與gulp-angular項目一起使用。庫本身工作正常，但我試圖包含庫的Codemirror插件，並遇到問題。當我嘗試添加庫和運行gulp serve，我得到這個錯誤：

Error in parsing: "js/codemirror.js", Line 4: Unexpected reserved word

導致問題的行看起來像這樣：

import * as util from '../util.js'

我見過幾個人參考使用巴貝爾來解決這類問題，但解決方案似乎超出了我的技能水平。

下面就以插件的鏈接：

https://github.com/ghinda/jotted

我現在server.js

'use strict'; 

var path = require('path'); 
var gulp = require('gulp'); 
var conf = require('./conf'); 
var babel = require('gulp-babel'); 

var browserSync = require('browser-sync'); 
var browserSyncSpa = require('browser-sync-spa'); 

var util = require('util'); 

var proxyMiddleware = require('http-proxy-middleware'); 

function browserSyncInit(baseDir, browser) { 
    browser = browser === undefined ? 'default' : browser; 

    var routes = null; 
    if (baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) { 
     routes = { 
      '/bower_components': 'bower_components' 
     }; 
    } 

    var server = { 
     baseDir: baseDir, 
     routes : routes 
    }; 

    /* 
    * You can add a proxy to your backend by uncommenting the line below. 
    * You just have to configure a context which will we redirected and the target url. 
    * Example: $http.get('/users') requests will be automatically proxified. 
    * 
    * For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.9.0/README.md 
    */ 
    // server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true}); 

    browserSync.instance = browserSync.init({ 
     startPath: '/', 
     server : server, 
     browser: browser, 
     host: '192.168.0.20', 
     https: false, 
     port : parseInt(process.env.GULP_PORT) || 8684 
    }); 
} 

browserSync.use(browserSyncSpa({ 
    selector: '[ng-app]'// Only needed for angular apps 
})); 

gulp.task('serve', ['watch'], function() { 
    browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]); 
}); 

gulp.task('serve:dist', ['build'], function() { 
    browserSyncInit(conf.paths.dist); 
}); 

gulp.task('serve:e2e', ['inject'], function() { 
    browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []); 
}); 

gulp.task('serve:e2e-dist', ['build'], function() { 
    browserSyncInit(conf.paths.dist, []); 
}); 

var gulp = require('gulp'); 
var webserver = require('gulp-webserver'); 

gulp.task('webserver', function() { 
    gulp.src('src') 
    .pipe(webserver({ 
     host: '0.0.0.0', 
     livereload: true, 
     directoryListing: true, 
     open: true 
    })); 
}); 

我現在gulpfile.babel.js

/** 
* Welcome to your gulpfile! 
* The gulp tasks are splitted in several files in the gulp directory 
* because putting all here was really too long 
*/ 

'use strict'; 

var gulp = require('gulp'); 
var wrench = require('wrench'); 
var babel = require('gulp-babel'); 

/** 
* This will load all js or coffee files in the gulp directory 
* in order to load all gulp tasks 
*/ 
wrench.readdirSyncRecursive('./gulp').filter(function (file) { 
    return (/\.(js|coffee)$/i).test(file); 
}).map(function (file) { 
    require('./gulp/' + file); 
}); 


/** 
* Default task clean temporaries directories and launch the 
* main optimization build task 
*/ 
gulp.task('default', ['clean'], function() { 
    gulp.start('build'); 
}); 

堆棧跟蹤

...standard build procedure... 
[15:12:01] all files 224.05 kB 
[15:12:01] Finished 'scripts' after 2.64 s 
[15:12:01] Starting 'inject'... 
[15:12:01] gulp-inject 10 files into index.html. 
[15:12:02] [AngularFilesort] Error in plugin 'gulp-angular-filesort' 
Message: 
    Error in parsing: "js/codemirror.js", Line 4: Unexpected reserved word 
[15:12:02] gulp-inject Nothing to inject into index.html. 
[15:12:02] Finished 'inject' after 337 ms 
[15:12:02] Starting 'watch'... 
[15:12:02] Finished 'watch' after 93 ms 
[15:12:02] Starting 'serve'... 
[15:12:02] Finished 'serve' after 24 ms 
...standard serve procedure... 

Answer 1

我的猜測是，您在ES5環境（不支持模塊）上運行帶有import語句的代碼。

如果像我懷疑的那樣在Node中運行它，則可以使用required代替。