我在Bower.json中包含了video.js 5.16.0和videojs-record 1.6.0，结果JavaScript代码被注入到以下index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>SelectPOP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<meta name="description" content="Architecture">
<meta name="keywords" content="">
<meta name="author" content="Sombra">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- inject:fonts:css --><!-- endinject -->
<!-- inject:vendor-styles:css --><link rel="stylesheet" href="../css/vendor-93729a7ec8.css"><!-- endinject -->
<!-- inject:app-styles:css --><link rel="stylesheet" href="../css/main-53180137c4.css"><!-- endinject -->
<!-- uncomment if using your own iconfont -->
<!-- <link rel="stylesheet" href="styles/own-icons.css"> -->
</head>
<body ng-app="selectPopApp" ng-strict-di>
<header>
<header-component></header-component>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12 main-content" ui-view>
</div>
</div>
</div>
</body>
<!-- inject:vendor:js --><script src="../js/vendor-ef1f3e9bbb.js"></script><!-- endinject -->
<!-- inject:app:js --><script src="../js/app-d9c3c6c010.module.js"></script><!-- endinject -->
<!-- inject:scripts:js --><script src="../js/scripts-be58dca5c9.js"></script><!-- endinject -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src=https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js></script>
</html>
我使用Spring-boot运行该应用程序，但是当我在Chrome中使用它时，出现“未捕获的语法错误：意外的标识符”。导致该问题的JavaScript是：
import log from './utils/log';
import formatTime from './utils/format-time';
import pluginDefaultOptions from './defaults';
import window from 'global/window';
import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
我尝试将type="module"插入html as suggested in this Q&A中，然后Chrome停止抱怨第一个导入源，并在“从'global / window'行的导入窗口中”得到了错误
使用的Gulp.js如下：
(function () {
'use strict';
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var del = require('del');
var express = require('express');
var open = require('open');
var stylish = require('jshint-stylish');
var streamqueue = require('streamqueue');
var runSequence = require('run-sequence');
var merge = require('merge-stream');
var ripple = require('ripple-emulator');
var wiredep = require('wiredep');
var rigger = require('gulp-rigger');
var deletefile = require('gulp-delete-file');
var inject = require('gulp-inject');
var path = {
build: {
html: {
views: 'dist/pages/views/',
components: 'dist/pages/components',
directives: 'dist/pages/directives'
},
js: 'dist/js/',
css: 'dist/css/',
img: 'dist/images/',
fonts: 'dist/fonts/',
icons: 'dist/icons/'
},
src: {
js: 'app/**/*.js',
styles: {
common: 'app/styles/**/*.scss',
views: 'app/views/**/*.scss',
components: 'app/components/**/**/*.scss',
directives: 'app/directives/**/**/*.scss'
},
html: {
views: 'app/views/**/*.html',
components: 'app/components/**/**/*.html',
directives: 'app/directives/**/**/*.html'
},
assets: {
css: 'app/assets/css/**/*.css',
img: 'app/assets/images/**/*.*',
fonts: 'app/assets/fonts/*.*',
icons: 'app/assets/icons/*.*'
}
},
dist: 'dist',
distStatic: '../resources/dist'
};
var resourcesPath = {
fontsScss: 'app/styles/_fonts.scss',
stylesMainSrc: 'app/styles/main.scss',
appModule: 'app/app.module.js',
indexSrc: 'app/index.html',
indexDist: 'dist/pages/index.html',
pagesFolder: '/pages/'
};
/*** Tasks ------------------------------------------------------------------------- ***/
/*** Maintenance ---------------------------------------------- ***/
gulp.task('clean', function (done) {
return del([path.dist], done);
});
gulp.task('clean-static', function (done) {
return del([path.distStatic], {force: true}, done);
});
gulp.task('delete-app-module', function () {
var dest = path.build.js + '*.js';
var regexp = /^app|scripts/;
return gulp.src(dest).pipe(deletefile({
reg: regexp,
deleteMatch: true
}))
});
gulp.task('delete-styles', function () {
var regexp = /^main|fonts/;
return gulp.src([path.build.css + '*.css']).pipe(deletefile({
reg: regexp,
deleteMatch: true
}));
});
/*** Assets --------------------------------------------------- ***/
gulp.task('images', function () {
return gulp.src(path.src.assets.img)
.pipe(gulp.dest(path.build.img));
});
gulp.task('icons', function () {
return gulp.src(path.src.assets.icons)
.pipe(gulp.dest(path.build.icons));
});
gulp.task('fonts', function () {
gulp.src('bower_components/font-awesome/fonts/**.*')
.pipe(gulp.dest(path.build.fonts));
return gulp.src([path.src.assets.fonts, 'bower_components/**/*.{ttf,woff,woff2,eof,svg}'])
.pipe(gulp.dest(path.build.fonts));
});
/*** App files --------------------------------------------------- ***/
gulp.task('styles', ['delete-styles'], function () {
var injectAppFiles = gulp.src(
[
path.src.styles.views,
path.src.styles.components,
path.src.styles.directives,
'!' + resourcesPath.stylesMainSrc
],
{read: false}
);
var injectAppOptions = {
transform: transformFilepath,
starttag: '// inject:app',
endtag: '// endinject',
addRootSlash: false
};
function transformFilepath(filepath) {
return '@import "' + filepath + '";';
}
gulp.src(resourcesPath.fontsScss)
.pipe(plugins.sass({style: 'expanded'}))
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.css));
return gulp.src(resourcesPath.stylesMainSrc)
.pipe(inject(injectAppFiles, injectAppOptions))
.pipe(plugins.sass({style: 'expanded'}))
.pipe(plugins.autoprefixer('last 2 version', '>1%', 'ie 9'))
.pipe(plugins.stripCssComments())
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.css));
});
gulp.task('scripts', ['delete-app-module'], function () {
var dest = path.build.js;
var scriptStream = gulp.src(['**/*.js', '!app.module.js'], {cwd: 'app'})
.pipe(plugins.changed(dest));
gulp.src(resourcesPath.appModule)
.pipe(plugins.rev())
.pipe(gulp.dest(dest));
return streamqueue({objectMode: true}, scriptStream)
.pipe(plugins.ngAnnotate())
.pipe(plugins.concat('scripts.js'))
.pipe(plugins.rev())
.pipe(gulp.dest(dest));
});
gulp.task('html', function () {
gulp.src(path.src.html.views)
.pipe(rigger())
.pipe(gulp.dest(path.build.html.views));
gulp.src(path.src.html.components)
.pipe(rigger())
.pipe(gulp.dest(path.build.html.components));
gulp.src(path.src.html.directives)
.pipe(rigger())
.pipe(gulp.dest(path.build.html.directives));
});
/*** Vendor ---------------------------------------------------- ***/
gulp.task('vendor-js', function () {
var vendorFiles = wiredep().js;
return gulp.src(vendorFiles)
.pipe(plugins.concat('vendor.js'))
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.js));
});
gulp.task('vendor-css', function () {
var vendorStyle = wiredep().css;
return gulp.src(vendorStyle)
.pipe(plugins.concat('vendor.css'))
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.css));
});
/*** Assemble tasks ------------------------------------------- ***/
gulp.task('injector', ['scripts', 'html', 'styles'], function () {
var _inject = function (src, tag) {
return plugins.inject(src, {
starttag: '<!-- inject:' + tag + ':{{ext}} -->',
addRootSlash: false,
ignorePath: path.dist,
addPrefix: '..'
});
};
return gulp.src(resourcesPath.indexSrc)
.pipe(_inject(gulp.src(path.build.css + '/fonts*.css'), 'fonts'))
.pipe(_inject(gulp.src(path.build.css + '/main*.css'), 'app-styles'))
.pipe(_inject(gulp.src(path.build.css + '/vendor*.css'), 'vendor-styles'))
.pipe(_inject(gulp.src(path.build.js + '/vendor*.js'), 'vendor'))
.pipe(_inject(gulp.src(path.build.js + '/app*.js'), 'app'))
.pipe(_inject(gulp.src(path.build.js + '/scripts*.js'), 'scripts'))
.pipe(gulp.dest(path.dist + resourcesPath.pagesFolder));
});
gulp.task('log-success', function () {
console.log('----------------- GULP BUILD SUCCESS --------------------');
});
gulp.task('watchers', function () {
gulp.watch(path.src.assets.css, ['styles', 'injector']);
gulp.watch(path.src.assets.fonts, ['fonts']);
gulp.watch(path.src.assets.img, ['images']);
gulp.watch(path.src.html.views, ['html', 'injector']);
gulp.watch(path.src.html.components, ['html', 'injector']);
gulp.watch(path.src.html.directives, ['html', 'injector']);
gulp.watch(path.src.styles.common, ['styles', 'injector']);
gulp.watch(path.src.styles.views, ['styles', 'injector']);
gulp.watch(path.src.styles.components, ['styles', 'injector']);
gulp.watch(path.src.styles.directives, ['styles', 'injector']);
gulp.watch(path.src.js, ['scripts', 'injector']);
gulp.watch(resourcesPath.indexSrc, ['html', 'injector']);
gulp.watch('bower.json', ['vendor-js', 'vendor-css']);
});
gulp.task('default', function (done) {
runSequence(
'clean',
'clean-static',
[
'fonts',
'images',
'vendor-js',
'vendor-css',
'styles',
'html',
'icons'
],
'injector',
'watchers',
'log-success',
done);
});
gulp.task('deploy', function (done) {
runSequence(
'clean',
'clean-static',
[
'fonts',
'images',
'vendor-js',
'vendor-css',
'styles',
'html',
'icons'
],
'injector',
done);
});
})();
答案 0 :(得分：0)
您如何编译它？根据您的语法和已编译模块的名称，假设您使用的是Webpack，这意味着您很可能使用Typescript（除非您打算将其标记为AngularJS）。无论如何，ES6导入语句都是相同的，并且您使用的语法仅用于默认导出。
import仅在type="module"位于脚本标记上时才能在ES6 JS中使用。
因此，除非您设置默认导出并依赖默认导出，否则导入显式导出的语法为：
import { exportedProperty1 } from 'module-name'
import { exportedThing1, exportedThing2 } from 'module-name'
import defaultExport from 'module-name'
import * as Name from 'module-name'
...其中，“模块名称”是文件的相对路径。
此语法不需要type="module"：
let myThing = import('module-name')
您来自window的{{1}}的问题将特定于您的捆绑软件，您的平台，您的文件和您的polyfills。
答案 1 :(得分：0)
所有包含es6 JavaScript的软件包都必须使用webpack进行单独编译，然后必须对bower.json的“ overrides”部分进行更改，以使大型项目包含dist目录和生成的min.js文件。编译项目，以便gulp注入它们。例如
"overrides" {
"videojs-record": {
"main": [
"dist/videojs.record.min.js"
]
}
}