[英]ES6 via jspm errors in Firefox, Edge, Vivaldi, but works in Chrome, Opera
I'm using ES6 via jspm + SystemJS + traceur according to jspm tutorial. 我正在根据jspm教程通过jspm + SystemJS + traceur使用ES6。
Everything works fine in Chrome and Opera, however, console posts various errors in other browsers. 在Chrome和Opera中,一切正常,但是,控制台在其他浏览器中发布了各种错误。
Firefox: SyntaxError: class is a reserved identifier, uncaught exception: SyntaxError: class is a reserved identifier
Firefox:
SyntaxError: class is a reserved identifier, uncaught exception: SyntaxError: class is a reserved identifier
Edge: SCRIPT1002: Syntax error, Potentially unhandled rejection [2] Syntax error
边:
SCRIPT1002: Syntax error, Potentially unhandled rejection [2] Syntax error
Vivaldi: Unexpected token =>
Vivaldi:
Unexpected token =>
SystemJS readme states that it runs even IE8+. SystemJS 自述文件指出,它甚至可以运行IE8 +。
My jspm.config.js
: 我的
jspm.config.js
:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "traceur",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
shim: {
"packages": {
"assets/js/lib/tabs": {
"main": "tabby",
"format": "global",
"deps": "jquery",
"exports": "$.tabby"
},
"assets/js/lib/select": {
"main": "selectify",
"format": "global",
"deps": "jquery",
"exports": "$.selectify"
}
}
},
map: {
"babel": "npm:babel-core@5.8.25",
"babel-runtime": "npm:babel-runtime@5.8.25",
"core-js": "npm:core-js@1.2.1",
"jquery": "github:components/jquery@2.1.4",
"jquery-mask-plugin": "npm:jquery-mask-plugin@1.13.4",
"jquery-validation": "github:jzaefferer/jquery-validation@1.14.0",
"selectify": "assets/js/lib/select",
"tabby": "assets/js/lib/tabs",
"traceur": "github:jmcriffey/bower-traceur@0.0.91",
"traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.91",
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-process@0.1.2": {
"process": "npm:process@0.11.2"
},
"github:jspm/nodelibs-util@0.1.0": {
"util": "npm:util@0.10.3"
},
"github:jzaefferer/jquery-validation@1.14.0": {
"jquery": "github:components/jquery@2.1.4"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:babel-runtime@5.8.25": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:core-js@1.2.1": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:process@0.11.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
}
}
});
And package.json
: 和
package.json
:
{
"name": "project_name",
"version": "1.0.0",
"description": "project_description",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "project_author",
"license": "ISC",
"devDependencies": {
"glob": "^5.0.15",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.2",
"gulp-concat-css": "^2.2.0",
"gulp-imagemin": "^2.3.0",
"gulp-jspm": "^0.3.2",
"gulp-less": "^3.0.3",
"gulp-minify-css": "^1.2.1",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"imagemin-pngquant": "^4.2.0",
"jspm": "^0.16.11"
},
"jspm": {
"configFile": "jspm.config.js",
"dependencies": {
"jquery": "github:components/jquery@^2.1.4",
"jquery-mask-plugin": "npm:jquery-mask-plugin@^1.13.4",
"jquery-validation": "github:jzaefferer/jquery-validation@^1.14.0"
},
"devDependencies": {
"babel": "npm:babel-core@^5.8.24",
"babel-runtime": "npm:babel-runtime@^5.8.24",
"core-js": "npm:core-js@^1.1.4",
"traceur": "github:jmcriffey/bower-traceur@0.0.91",
"traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.91"
}
}
}
Desperate to solve this situation, as I understand, that there could be many reasons for it. 据我了解,迫切需要解决这种情况,可能有很多原因。 Maybe someone run across similar issue with that setup.
也许有人遇到与该设置类似的问题。
Got it. 得到它了。
This was due to one of the plugins, which was provided in jspm.config.js
shim. 这是由于
jspm.config.js
shim中提供了一个插件。 The plugin was using an Immediately-Invoked Arrow Function
notation and word class
without any export directive, and thus, shim plugin wasn't transpiled into ES5 . 该插件使用了
Immediately-Invoked Arrow Function
符号和单词class
而没有任何导出指令,因此,shim插件没有被移植到ES5中 。
So instead of using ES6 classes in third-party libraries (shim plugins) it should be build with simple prototypal inheritance. 因此, 与其在第三方库(Shim插件)中使用ES6类, 不如使用简单的原型继承来构建它。
Cost me several hours to find out. 花了我几个小时才能找到答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.