如何使用“webpack模块绑定器”在ES6中实现继承？ [英] How to achieve inheritance in ES6 with "webpack module bundler"?

问题描述

我的目录结构看起来像

webpack.config.js看起来像

  module.exports = {
条目：./entry.js，
输出：{
路径：__dirname， 
 filename：bundle.js
}，
 module：{
 loaders：[
 {
 loader：babel-loader，
 //只能通过Babel 
测试运行`.js`和`.jsx`文件：/\.jsx?$/，
 //使用
配置babel的选项查询： {
预设：['es2015']，
} 
}，
] 
} 
}; 
  

Entry.js看起来像

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

content.js看起来像

  export class added {
 constructor（）{
 this.x = 10; 
} 
} 
  

content1.js看起来像

  class subtraction extends added {
 constructor（）{
 super（）; 
 this.y = this.x  -  5; 
} 
} 
 
 var inst = new subtraction（）; 
 console.log（inst.x，inst.y）
  

之后生成bundle.js使用webpack并运行index.html：获取错误，如

请帮我弄清楚，使用webpack模块绑定器在ES6中实现继承。

解决方案

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

  import {addition} from'./content'; 
 
类减法扩展添加{
 // ... 
} 
  

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.

解决方案

Each module must import all of its dependencies:

import {addition} from './content';

class subtraction extends addition {
  // ...
}

这篇关于如何使用“webpack模块绑定器”在ES6中实现继承？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！