Webpack ES6-自定义元素不适用于网页包_Webpack_Ecmascript 6_Custom Element

Webpack ES6-自定义元素不适用于网页包

webpack ecmascript-6

Webpack ES6-自定义元素不适用于网页包,webpack,ecmascript-6,custom-element,Webpack,Ecmascript 6,Custom Element,我正在尝试使用ES6和webpack创建自定义元素下面的代码在没有网页的情况下工作 HTML: 请查找以下文件夹结构和webpack.config.js文件 webpack.config.js文件： module.exports={ entry:'./assets/js/scripts.js', output:{ filename:'./lib/js/lib.js' }, module:{ loaders:[ { test: /\

我正在尝试使用ES6和webpack创建自定义元素

下面的代码在没有网页的情况下工作

HTML:

请查找以下文件夹结构和webpack.config.js文件

webpack.config.js文件：

module.exports={
  entry:'./assets/js/scripts.js',
  output:{
    filename:'./lib/js/lib.js'
  },
  module:{
    loaders:[
      {
        test: /\.js$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        query:{
          presets:['es2015']
        }
      }
    ]
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

<my-element></my-element>
  <script src="./lib/js/lib.js"></script>
  </body>
</html>

唯一与我的问题最接近的答案是，但它与typescript有关，但ES2015的transpiling在我的代码中可用

typescript是一个类似于Babel的编译器。如果Typescript没有像其他问题一样的填隙片就无法完成，那么Babel也无法完成。我已经对HTML自定义元素Polyfill使用了下面的cdn，但没有成功删除构造函数（）调用或查看其他问题相同的错误-未捕获的TypeError:未能构造“HtmleElement”：请使用“new”运算符，此DOM对象构造函数不能作为函数调用。运气不好：(

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

module.exports={
  entry:'./assets/js/scripts.js',
  output:{
    filename:'./lib/js/lib.js'
  },
  module:{
    loaders:[
      {
        test: /\.js$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        query:{
          presets:['es2015']
        }
      }
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

<my-element></my-element>
  <script src="./lib/js/lib.js"></script>
  </body>
</html>

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1"
  }
}