ECMAScript 2015和gulp-babel：導入類

Question

我從其他文件導入（ECMAScript 2015）類時遇到問題。 我index.js北京時間很短：

import {Viewer3D} from '/src/viewer3d.js'; 

var viewer3D = new Viewer3D(); 
viewer3D.foo(); 

，並通過index.html中正常調用，但隨後產生的：

遺漏的類型錯誤：無法讀取屬性「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

但是沒有源代碼...所以沒有調試是可能的...。

Answer 1

OK我解決了這個具有以下webpack.config.babel.js：

---

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     preload: ['babel-polyfill', './src/main.js'] 
    }, 
    cache: true, 
    debug: true, 
    devtool: 'source-map', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     publicPath: '../dist/', 
     filename: '[name].js', 
     chunkFilename: '[id].js' 
    }, 

    resolve: { 
     root: [ 
      path.join(__dirname, '..', 'app', 'src'), 
     ], 
     alias: { 
      jquery$: 'jquery/jquery', 
      lodash$: 'lodash/lodash', 
      _$: 'lodash/lodash' 
     } 
    }, 

    resolveLoader: { 
     root: [ 
      path.join(__dirname, 'node_modules') 
     ] 
    }, 

    module: { 
     loaders: [ 
      { 
       loader: "babel-loader", 

       // Skip any files outside of your project's `src` directory 
       include: [ 
        path.resolve(__dirname, "src"), 
       ], 

       // Only run `.js` and `.jsx` files through Babel 
       test: /\.jsx?$/, 

       // Options to configure babel with 
       query: { 
        plugins: ['transform-runtime'], 
        presets: ['es2015', 'stage-0'] //, 'react'], 
       } 
      }, 

      { test: /\.css$/, loaders: ['style/useable', 'css'] }, 
      { test: /[\/\\]jquery\.js$/, loader: 'exports?window.$' } 
     ], 
     noParse: [ 
      /[\/\\]jquery\.js$/ 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.SourceMapDevToolPlugin({ 
      test:/\.js$/, 
      moduleFilenameTemplate:'[absolute-resource-path]', 
      fallbackModuleFilenameTemplate:'[absolute-resource-path]?[hash]', 
      filename: "[file].map", 
      sourceRoot:'/src/'} 
     ) 
    ] 
}; 

---

和gulpfile.babel。JS：

---

"use strict" 

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var webpack = require('webpack'); 
var webpackConfig = require('./webpack.config.babel'); 
var WebpackDevServer = require('webpack-dev-server'); 

gulp.task('default', ['webpack']); 

gulp.task('webpack', function(callback) 
{ 
    var myConfig = Object.create(webpackConfig); 
    myConfig.plugins = [ 
     new webpack.optimize.DedupePlugin() 
    ]; 

    // run webpack 
    webpack(myConfig, function(err, stats) 
    { 
    if (err) 
     throw new gutil.PluginError('webpack', err); 
    gutil.log('[webpack]', stats.toString({ 
     colors: true, 
     progress: true 
    })); 
    callback(); 
    }); 
}); 

gulp.task('server', ['webpack'], function(callback) 
{ 
    // modify some webpack config options 
    var myConfig = Object.create(webpackConfig); 
    myConfig.devtool = 'eval'; 
    myConfig.debug = true; 

    // Start a webpack-dev-server 
    new WebpackDevServer(webpack(myConfig), 
     { 
     publicPath: '/' + myConfig.output.publicPath, 
     stats: { 
      colors: true 
     }, 
     hot: true 
    }).listen(9014, 'localhost', function(err) 
    { 
     if(err) 
      throw new gutil.PluginError('webpack-dev-server', err); 
     gutil.log('[webpack-dev-server]', 'http://localhost:9014/webpack-dev-server/index.html'); 
    }); 
}); 

---

並減少.babelrc到：

{ 
    "presets": ["es2015"] 
} 

---

的package.json（相關部分）：

"devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.9.1", 
    "babel-eslint": "^6.0.4", 
    "babel-loader": "^6.2.4", 
    "babel-plugin-transform-runtime": "^6.9.0", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "chai": "^3.5.0", 
    "clean-webpack-plugin": "^0.1.9", 
    "css-loader": "^0.23.1", 
    "eslint": "^2.11.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "gulp": "^3.9.0", 
    "gulp-mocha": "^2.1.3", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-util": "^3.0.7", 
    "html-webpack-plugin": "^2.19.0", 
    "mocha": "^2.3.3", 
    "webpack": "^1.12.2", 
    "webpack-dev-server": "^1.12.1" 
    }, 
    "dependencies": { 
    "babel-runtime": "^6.9.2", 
    "baconjs": "^0.7.84", 
    "jquery": "^2.2.4", 
    "jquery-ui": "^1.10.5", 
    "lodash": "^4.13.1", 
    "three.js": "^0.77.1" 
    } 

---

我打電話

gulp server 

在Chrome調試（它並沒有真正與Webstorm工作），但需要重新啓動這個腳本，如果我改變了JS代碼。

Answer 2

我想你想的導入路徑是相對的而不是絕對的，改變進口

import {Viewer3D} from './src/viewer3d.js'