ECMAScript 2015和gulp-babel：導入類

Question

我從其他文件導入（ECMAScript 2015）類有問題。 我的index.js ist非常簡短：

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

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

並通過index.html中的a進行了正確調用，但隨后產生了：

未捕獲的TypeError：無法讀取未定義的屬性'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

我想您希望導入路徑是相對的而不是絕對的，將導入更改為

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

Answer 2

好的，我通過以下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代碼，則需要重新啟動此腳本。