【发布时间】：2016-05-30 11:23:18
【问题描述】：
我在从其他文件导入 (ECMAScript 2015) 类时遇到问题。 我的 index.js 很短：
import {Viewer3D} from '/src/viewer3d.js';
var viewer3D = new Viewer3D();
viewer3D.foo();
并通过 index.html 中的 a 正确调用，但随后会产生：
未捕获的类型错误：无法读取未定义的属性“Viewer3D”
尝试调用 Viewer3D 构造函数时。
现在，如果我将 Viewer3D 的源代码复制到 index.js（删除导入行），一切正常。
但是如何处理多个 JS 源文件？
非常感谢您的帮助。
我的.babelrc：
{
"presets": ["es2015"],
"plugins": [
"transform-regenerator",
"transform-object-rest-spread",
"syntax-async-functions",
"transform-es2015-modules-umd"
]
}
我的 gulpfile.js 脚本的相关部分：
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var gulp = require('gulp');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
...
var source_path = "./src/*.js";
...
gulp.task('build-system', function()
{
return gulp.src( source_path )
.pipe(sourcemaps.init())
.pipe(babel())//Run through babel
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: function(file) {
return path.relative(file.path, __dirname);
}
}))
.pipe(gulp.dest("dist"));
});
我的 package.json 的相关部分：
"dependencies": {
"babel": "^6.5.2",
"browser-sync": "^2.12.10",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-changed": "^1.3.0",
"gulp-live-server": "0.0.29",
"gulp-sourcemaps": "^1.6.0",
"proxy-middleware": "^0.15.0",
"run-sequence": "^1.2.1",
"three.js": "^0.77.1"
},
"devDependencies": {
"babel-plugin-transform-es2015-modules-commonjs": "^6.8.0",
"babel-plugin-transform-es2015-modules-umd": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-regenerator": "^6.9.0",
"babel-preset-es2015": "^6.9.0"
}
我最小的 viewer3D.js：
export class Viewer3D {
constructor()
{
console.warn('Called Viewer3D constructor NOW.');
}
foo()
{
console.warn( 'foo called' );
}
}
注意： 当然，我没有在我的 gulpfile.js 脚本中捆绑源文件，它们只是编译到 dist 文件夹并通过
gulp.task('serve', ['build'], function() {
browserSync({
online: false,
open: false,
port: 9010,
server: {
baseDir: "dist",
middleware: function (req, res, next)
{
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}
}
});
});
注2：
我在这里找到了部分解决方案（使用 webpack）：
https://github.com/tiagorg/gulp-es6-webpack-example
但是没有源映射...所以无法调试... .
【问题讨论】：
-
你能给我们看看你的 viewer3d.js 吗？
-
我刚刚更新了上面的代码。
标签： javascript gulp ecmascript-6 webpack babeljs