How to achieve inheritance in ES6 with “webpack module bundler”?

你。 提交于 2019-12-24 01:25:34

问题


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 {
  // ...
}


来源:https://stackoverflow.com/questions/35974619/how-to-achieve-inheritance-in-es6-with-webpack-module-bundler

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!