在另一個構造函數中使用導入的類

ES6語法入門，爲什麼Main中的MesageTester.Create("bar");失敗？在另一個構造函數中使用導入的類

，我有以下的的src/app.js（這也是進入的WebPack）：

import {MessageTester} from './helpers/MessageTester'; 

class Main { 
    constructor() { 
     //does run 
     console.log("trying.."); 

     //causes crash "Uncaught ReferenceError: MesageTester is not defined" 
     MesageTester.Create("bar"); 
    } 
} 

//is fine 
MessageTester.Create("foo"); 

//for testing 
new Main();

在另一個文件中，的src /助理/ MessageTester.js，我有這樣的：

class MessageTester { 
    constructor(msg) { 
     document.querySelector('#root').innerHTML = `<p>` + msg + `</p>`; 
    } 

    static Create(msg) { 
     return new MessageTester(msg); 
    } 
} 

export {MessageTester};

正如在評論中指出，主要的外MessageTester.Create()作品，主要的構造函數運行。

如果它是相關的，這裏是我的WebPack配置（作爲aside-我不知道，如果源地圖的正常工作......可能與該bug在這裏，但不知道）：

// webpack.config.js 
const webpack = require('webpack') 
const path = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 

const config = { 
    context: path.resolve(__dirname, 'src'), 
    entry: { 
     jistudio: './app.js' 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: '[name].bundle.js', 
     sourceMapFilename: '[name].map', 
     chunkFilename: '[id].chunk.js' 
    }, 
    module: { 
     rules: [{ 
      test: /\.js$/, 
      include: path.resolve(__dirname, 'src'), 
      use: [{ 
       loader: 'babel-loader', 
       options: { 
        presets: [ 
         ['es2015', {modules: false}] 
        ] 
       } 
      }] 
     }] 
    }, 
    devtool: 'eval-source-map', 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html', 
      chunksSortMode: 'dependency' 
     }), 
     new CopyWebpackPlugin([ 
      { 
       from: path.resolve(__dirname, 'assets'), 
      } 
     ]), 
     new webpack.optimize.UglifyJsPlugin({sourceMap: true}) 
    ], 
    devServer: { 
     contentBase: path.join(__dirname, "dist"), 
     compress: true, 
     port: 3000 
    } 
} 

module.exports = config

來源

2017-04-14 davidkomer

Missing s

MessageTester.Create("bar");

來源

2017-04-14 10:34:31 konradluka

大聲笑...謝謝！有趣的是，我很確定它是在webpack配置中的東西，因爲我幾乎複製/粘貼，所以它讓我懷疑自己;）非常感謝！ – davidkomer

在另一個構造函數中使用導入的類

回答

相關問題