How to achieve inheritance in ES6 with “webpack mo

问题:

Unable to achieve inheritance in ES6 classes, when import two file using webpack module bundler with babel

My directory structure looks like

webpack.config.js looks like

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
    {
      loader: "babel-loader",
      // Only run `.js` and `.jsx` files through Babel
      test: /\.jsx?$/,
      // Options to configure babel with
      query: {
        presets: ['es2015'],
      }
    },
  ]
  }
};

Entry.js looks like

import './content.js';
import './content1.js';

content.js looks like

export class addition {
  constructor(){
    this.x = 10 ;
  }
}

content1.js looks like

class subtraction extends addition{
  constructor(){
    super();
    this.y = this.x - 5 ;
  }
}

var inst = new subtraction();
console.log(inst.x, inst.y)

after generate bundle.js with webpack and run index.html: Getting error like

Kindly help me to figure out, how to achieve inheritance in ES6 with webpack module bundler.

回答1:

Each module must import all of its dependencies:

import {addition} from './content';

class subtraction extends addition {
  // ...
}