pws019 commented 6 years ago

when I use webpack&babel, the result show "XTagElement is not defined" ... tip:x-tag-version:2.0.9-alpha

.babelrc

{
  "presets": [
    "env"
  ]
}

webpack

{
   test:/\.js$/,
   use:{
            loader:'babel-loader'
   },
   //exclude: /node_modules/
}

index.js


import '../css/index.css';
import {xtag, XTagElement} from 'x-tag';

var PraiseBtn = xtag.create('praise-button',class extends XTagElement{

  constructor() {
    super();
    console.log('xtag init');
  }

  '::template(true)' () {
    return `
      <div class="praise-btn">这是一个praiseButton</div>
    `
  };

  'click::event' () {
    console.log('click-element');
  }
})

export default PraiseBtn;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <script src="https://cdn.bootcss.com/x-tag/2.0.9-alpha/x-tag-polyfilled.js"></script> -->
  <title>Document</title>
</head>
<body>
  <praise-button></praise-button>
<script type="text/javascript" src="./assets/js/index.js"></script></body>
</html>

the result:

how can I fix the problem?

ghost commented 6 years ago

I've never used babel, but why is the x-tag cdn commented out?

pws019 commented 6 years ago

@KipOmaha because I npm install x-tag.Then I don't need link script.Just import the x-tag in Js

import {xtag, XTagElement} from 'x-tag';

But when I use webpack bundle the x-tag, as mentioned above. If I don't bundle the x-tag, I meet anothre issue ->

 Class constructor XXX cannot be invoked without 'new'

Of course,when I don't use Babel and write native code,then It's ok. But I don't how can I make it work with webpack+babel well...

ghost commented 6 years ago

try the raw source ? So you don't run into conflicting polys?

x-tag / core

XTagElement is not defined #200

how can I fix the problem?