javascript - 如何使用“webpack module bundler”在 ES6 中实现继承？

Question

使用带有 babel 的 webpack 模块捆绑器导入两个文件时，无法在 ES6 类中实现继承

我的目录结构看起来像

webpack.config.js 看起来像

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 看起来像

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

content.js 看起来像

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

content1.js 看起来像

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

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

使用 webpack 生成 bundle.js 并运行 index.html 后：出现类似错误

请帮助我弄清楚如何使用 webpack 模块捆绑器在 ES6 中实现继承。

Answer 1

每个模块都必须导入其所有依赖项：

import {addition} from './content';

class subtraction extends addition {
  // ...
}