Polymer 3.0 プレビュー コードをテストしており、Webpack と Babel を使用して単純なプロジェクトをセットアップし、それを ES5 に変換したいと考えています。
コンパイルは正常に機能しています。custom-elements-es5-adapter.js をデモ ページに追加しましたが、バンドルされたコードが次のエラーで実行されます。
custom-component.js:13 Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'
at HTMLElement.CustomComponent (custom-component.js:13)
at new j (custom-elements-es5-adapter.js:4)
at CustomElementRegistry.value (custom-elements-es5-adapter.js:4)
at Object.defineProperty.value (custom-component.js:23)
at __webpack_require__ (bootstrap 6c5b87648fe743e36ebc:19)
at window.JSCompiler_renameProperty (bootstrap 6c5b87648fe743e36ebc:62)
at bootstrap 6c5b87648fe743e36ebc:62
ES6 コードはここから取得されます: https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview
import {Element as PolymerElement} from '@polymer/polymer/polymer-element';
export class CustomComponent extends PolymerElement {
static get template() {
return `<div>This is my [[name]] app.</div>`
}
constructor() {
super();
this.name = '3.0 preview';
}
static get properties() {
name: {
Type: String
}
}
}
customElements.define('custom-component', CustomComponent);
webpack.config.js
const {resolve} = require('path');
module.exports = {
context: resolve(__dirname, 'src'),
entry: {
"custom-component": './custom-component.js'
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.js']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
コードは私の Github リポジトリで簡単に確認できます: https://github.com/janrembold/webcomponent-examples/tree/master/06-frameworks/04-polymer
このエラーは、Polymer3 の初期状態のためだけに発生しますか? それとも、ここで何かが恋しいですか?
ところで、私たちのプロジェクトにはいくつかの特別な要件があるため、polymer-cli を使用したくありません。
助けてくれてありがとう!