ready
mkdir pracitcie-x-tag && ce $_ npm init --yes npm install --save x-tag npm install --save-dev webpack webpack-dev-server
add: entry.js
const xtag = require('x-tag'); xtag.register('x-clock', { lifecycle: { created: function(){ this.start(); } }, methods: { start: function(){ this.update(); this.xtag.interval = setInterval(this.update.bind(this), 1000); }, stop: function(){ this.xtag.interval = clearInterval(this.xtag.interval); }, update: function(){ this.textContent = new Date().toLocaleTimeString(); } }, events: { tap: function(){ if (this.xtag.interval) this.stop(); else this.start(); } } });
add index.html
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> <x-clock /> </html>
add: webpack.config.js
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" } };
run
% $(npm bin)/webpack-dev-server
open
% open http://localhost:8080/webpack-dev-server/
おしまい