diff --git a/TODO.md b/TODO.md
deleted file mode 100644
index 9e33014..0000000
--- a/TODO.md
+++ /dev/null
@@ -1,8 +0,0 @@
-1. 新建字体文件之后，存在大于0xFFFF的unicode，生成的ttf无法识别小于0xFFFF的字体
-
-2. svg g,defs 组支持
-
-3. 路径的交、并、差集在特殊情况下会buzz
-
-
-4. 图片导入只能导入轮廓鲜明的图像，图像拟合效果不好
diff --git a/config/webpack.demo.js b/config/webpack.demo.js
new file mode 100644
index 0000000..2dbe44a
--- /dev/null
+++ b/config/webpack.demo.js
@@ -0,0 +1,131 @@
+/**
+ * @file webpack 配置
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+const fs = require('fs');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const DEMO_DIR = path.resolve(__dirname, '../demo');
+
+function getEntries() {
+    let files = fs.readdirSync(DEMO_DIR + '/js');
+    let entries = {};
+    for (let file of files) {
+        if (file.endsWith('.js')) {
+            let entryScript = file.replace('.js', '');
+            entries[entryScript] = './demo/js/' + file;
+        }
+    }
+    return entries;
+}
+
+
+function getHtmlPages() {
+    let files = fs.readdirSync(DEMO_DIR);
+    let pages = [];
+    for (let file of files) {
+        if (file.endsWith('.html')) {
+            let entryScript = file.replace('.html', '');
+            pages.push(
+                new HtmlWebpackPlugin({
+                    title: file,
+                    filename: 'demo/' + file,
+                    template: path.resolve(DEMO_DIR, file),
+                    chunks: [entryScript]
+                })
+            );
+        }
+    }
+    return pages;
+}
+
+module.exports = {
+    entry: getEntries(),
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        filename: 'js/[name].js'
+    },
+    devtool: 'inline-source-map',
+    devServer: {
+        contentBase: './'
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.json'],
+        alias: {
+            'css': path.resolve(__dirname, '../css'),
+            'common': path.resolve(__dirname, '../src/common'),
+            'graphics': path.resolve(__dirname, '../src/graphics'),
+            'math': path.resolve(__dirname, '../src/math'),
+            'editor': path.resolve(__dirname, '../src/editor'),
+            'render': path.resolve(__dirname, '../src/render'),
+            'fonteditor-core': path.resolve(__dirname, '../node_modules/fonteditor-core/src'),
+            'JSZip$': path.resolve(__dirname, '../dep/jszip/jszip.min.js'),
+            'inflate$': path.resolve(__dirname, '../dep/pako_inflate.min.js'),
+            'deflate$': path.resolve(__dirname, '../dep/pako_deflate.min.js'),
+            'paper$': path.resolve(__dirname, '../dep/paper-full.js'),
+            'utpl$': path.resolve(__dirname, '../dep/utpl.min.js')
+        }
+    },
+    externals: {
+        jquery: 'window.jQuery',
+        $: 'window.jQuery'
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'index page',
+            filename: 'index.html',
+            template: path.resolve(DEMO_DIR, 'index.html'),
+            chunks: ['index']
+        }),
+        ...getHtmlPages()
+    ],
+    module: {
+        rules: [
+            {
+                test: /\/(index|empty|editor)\.tpl$/,
+                loader: 'index-loader'
+            },
+            {
+                test: /template\/(.+?)\.tpl$/,
+                loader: 'tpl-loader'
+            },
+            {
+                test: /\.lesstpl$/,
+                use: [
+                    'css-loader',
+                    'less-loader'
+                ]
+            },
+            {
+                test: /\.less$/,
+                use: ['style-loader', 'css-loader', 'less-loader']
+            },
+            {
+                test: /\.(png|svg|jpg|gif)$/,
+                use: [
+                    {
+                        loader: 'url-loader',
+                        options: {
+                            limit: 1000
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf|wasm)$/,
+                use: [
+                    {
+                        loader: 'url-loader',
+                        options: {
+                            limit: 1000
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    resolveLoader: {
+        modules: [path.resolve(__dirname, '../build'), 'node_modules']
+    }
+};
diff --git a/demo/bezierSegmentCross.html b/demo/bezierSegmentCross.html
index 8266665..98645d2 100644
--- a/demo/bezierSegmentCross.html
+++ b/demo/bezierSegmentCross.html
@@ -40,22 +40,5 @@
     <div class="point" data-index="3"></div>
     <div class="point" data-index="4"></div>
     <canvas id="canvas" width="800" height="800"></canvas>
-<script>
-    require.config({
-        baseUrl: '../src',
-        packages: [
-            {
-                name: 'fonteditor-core',
-                location: '../dep/fonteditor-core/src'
-            }
-        ],
-        paths: {
-            demo: '../demo/js',
-        }
-    });
-    define('jquery', $);
-</script>
-
-<script>require(['demo/bezierSegmentCross'])</script>
 </body>
 </html>
diff --git a/demo/bezierSplit.html b/demo/bezierSplit.html
index 824d12e..dc6d4bb 100644
--- a/demo/bezierSplit.html
+++ b/demo/bezierSplit.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>贝塞尔分割</title>
-    <script src="../dep/esl.js"></script>
     <script src="../dep/jquery.min.js"></script>
     <style>
         body {
@@ -39,22 +38,5 @@
     <div id="control-point" class="point" data-index="2"></div>
     <div class="point" data-index="3"></div>
     <canvas id="canvas" width="800" height="800"></canvas>
-<script>
-    require.config({
-        baseUrl: '../src',
-        packages: [
-            {
-                name: 'fonteditor-core',
-                location: '../dep/fonteditor-core/src'
-            }
-        ],
-        paths: {
-            demo: '../demo/js',
-        }
-    });
-    define('jquery', $);
-</script>
-
-<script>require(['demo/bezierSplit'])</script>
 </body>
 </html>
diff --git a/demo/boundSegmentCross.html b/demo/boundSegmentCross.html
index bb7992a..75d3d7b 100644
--- a/demo/boundSegmentCross.html
+++ b/demo/boundSegmentCross.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>bound和线段相交</title>
-    <script src="../dep/esl.js"></script>
     <script src="../dep/jquery.min.js"></script>
     <style>
         body {
@@ -30,22 +29,6 @@
     <div class="point" data-index="2"></div>
     <div class="point" data-index="3"></div>
     <canvas id="canvas" width="500" height="500"></canvas>
-<script>
-    require.config({
-        baseUrl: '../src',
-        packages: [
-            {
-                name: 'fonteditor-core',
-                location: '../dep/fonteditor-core/src'
-            }
-        ],
-        paths: {
-            demo: '../demo/js',
-        }
-    });
-    define('jquery', $);
-</script>
 
-<script>require(['demo/boundSegmentCross'])</script>
 </body>
 </html>
diff --git a/demo/canvasFindBreakPoint.html b/demo/canvasFindBreakPoint.html
index 955e7fc..05edf68 100644
--- a/demo/canvasFindBreakPoint.html
+++ b/demo/canvasFindBreakPoint.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>canvas查找关键点</title>
-    <script src="../dep/esl.js"></script>
     <script src="../dep/jquery.min.js"></script>
     <style>
 
@@ -51,22 +50,7 @@
 
     <div class="left"><canvas id="canvas"></canvas></div>
     <div class="right"><canvas id="canvas-glyf"></canvas></div>
-<script>
-    require.config({
-        baseUrl: '../src',
-        packages: [
-            {
-                name: 'fonteditor-core',
-                location: '../dep/fonteditor-core/src'
-            }
-        ],
-        paths: {
-            demo: '../demo/js',
-        }
-    });
-    define('jquery', $);
-</script>
 
-<script>require(['demo/canvasFindBreakPoint'])</script>
+
 </body>
 </html>
diff --git a/demo/contoursCombine.html b/demo/contoursCombine.html
index c0f3eae..95e9db3 100644
--- a/demo/contoursCombine.html
+++ b/demo/contoursCombine.html
@@ -3,36 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <title>测试editor combine</title>
-    <script src="../dep/esl.js"></script>
     <script src="../dep/jquery.min.js"></script>
     <script src="../dep/paper-full.js"></script>
     <link rel="stylesheet" type="text/css" href="./css/editor.css">
     <style id="font-face"></style>
 </head>
 <body>
-    <script>
-        require.config({
-            baseUrl: '../src',
-            packages: [
-                {
-                    name: 'fonteditor-core',
-                    location: '../dep/fonteditor-core/src'
-                }
-            ],
-            paths: {
-                demo: '../demo/js',
-            }
-        });
-        define('jquery', $);
-        paper.install(window);
-        define('paper', paper);
-    </script>
 
     <div id="render-view" class="render-view glyf-editor" oncontextMenu="return false"></div>
-
-    <script>
-        require(['demo/contoursCombine']);
-    </script>
-
 </body>
 </html>
diff --git a/demo/data/contours-5.js b/demo/data/contours-5.js
index 7ff3557..3d2cd95 100644
--- a/demo/data/contours-5.js
+++ b/demo/data/contours-5.js
@@ -1,6 +1,2 @@
 
-define(
-    function(require) {
-        return {"xMin":66,"yMin":22,"xMax":500,"yMax":430,"unicode":[57357],"advanceWidth":633,"leftSideBearing":66,"name":"uniE00D","contours":[[{"x":226,"y":255},{"x":272,"y":301},{"x":272,"y":367},{"x":226,"y":413},{"x":160,"y":413},{"x":114,"y":367},{"x":114,"y":301},{"x":160,"y":255}],[{"x":431,"y":242},{"x":486,"y":297},{"x":486,"y":375},{"x":431,"y":430},{"x":353,"y":430},{"x":298,"y":375},{"x":298,"y":297},{"x":353,"y":242}],[{"x":196,"y":22},{"x":250,"y":76},{"x":250,"y":152},{"x":196,"y":206},{"x":119,"y":206},{"x":66,"y":152},{"x":66,"y":76},{"x":119,"y":22}],[{"x":178,"y":340,"onCurve":true},{"x":423,"y":340,"onCurve":true},{"x":423,"y":113,"onCurve":true},{"x":178,"y":113,"onCurve":true}],[{"x":446,"y":28},{"x":500,"y":82},{"x":500,"y":158},{"x":446,"y":212},{"x":369,"y":212},{"x":316,"y":158},{"x":316,"y":82},{"x":369,"y":28}]]}
-    }
-);
+module.exports = {"xMin":66,"yMin":22,"xMax":500,"yMax":430,"unicode":[57357],"advanceWidth":633,"leftSideBearing":66,"name":"uniE00D","contours":[[{"x":226,"y":255},{"x":272,"y":301},{"x":272,"y":367},{"x":226,"y":413},{"x":160,"y":413},{"x":114,"y":367},{"x":114,"y":301},{"x":160,"y":255}],[{"x":431,"y":242},{"x":486,"y":297},{"x":486,"y":375},{"x":431,"y":430},{"x":353,"y":430},{"x":298,"y":375},{"x":298,"y":297},{"x":353,"y":242}],[{"x":196,"y":22},{"x":250,"y":76},{"x":250,"y":152},{"x":196,"y":206},{"x":119,"y":206},{"x":66,"y":152},{"x":66,"y":76},{"x":119,"y":22}],[{"x":178,"y":340,"onCurve":true},{"x":423,"y":340,"onCurve":true},{"x":423,"y":113,"onCurve":true},{"x":178,"y":113,"onCurve":true}],[{"x":446,"y":28},{"x":500,"y":82},{"x":500,"y":158},{"x":446,"y":212},{"x":369,"y":212},{"x":316,"y":158},{"x":316,"y":82},{"x":369,"y":28}]]}
\ No newline at end of file
diff --git a/demo/datastore.html b/demo/datastore.html
index 5859cc4..4100286 100644
--- a/demo/datastore.html
+++ b/demo/datastore.html
@@ -3,29 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <title>测试editor</title>
-    <script src="../dep/esl.js"></script>
     <script src="../dep/jquery.min.js"></script>
 </head>
 <body>
-    <script>
-        require.config({
-            baseUrl: '../src',
-            packages: [
-                {
-                    name: 'fonteditor-core',
-                    location: '../dep/fonteditor-core/src'
-                }
-            ],
-            paths: {
-                demo: '../demo/js',
-            }
-        });
-        define('jquery', $);
-    </script>
-
-    <script>
-        require(['demo/datastore']);
-    </script>
 
 </body>
 </html>
diff --git a/demo/editor-iframe.html b/demo/editor-iframe.html
index 3340837..631b00e 100644
--- a/demo/editor-iframe.html
+++ b/demo/editor-iframe.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>测试editor远程调用</title>
-    <script src="../dep/esl.js"></script>
     <script src="../dep/jquery.min.js"></script>
     <style>
         body {
@@ -20,18 +19,5 @@
 
     <button id="get-font">获取font</button>
 
-    <script>
-        require.config({
-            baseUrl: '../src',
-            paths: {
-                demo: '../demo/js',
-            }
-        });
-        define('jquery', $);
-    </script>
-    <script>
-        require(['demo/editor-iframe']);
-    </script>
-
 </body>
 </html>
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..0d85c14
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>demo首页</title>
+    <script src="../dep/jquery.min.js"></script>
+</head>
+<body>
+<h3>demo列表</h3>
+<o>
+    <li><a href="demo/bezierSegmentCross.html">bezierSegmentCross</a></li>
+    <li><a href="demo/bezierSplit.html">bezierSplit</a></li>
+    <li><a href="demo/boundSegmentCross.html">boundSegmentCross</a></li>
+    <li><a href="demo/CanvasFindBreakPoint.html">CanvasFindBreakPoint</a></li>
+    <li><a href="demo/contoursCombine.html">contoursCombine</a></li>
+    <li><a href="demo/editor-iframe.html">editor-iframe</a></li>
+</o>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/js/bezierSegmentCross.js b/demo/js/bezierSegmentCross.js
index f9f1c2a..0bcc8ca 100644
--- a/demo/js/bezierSegmentCross.js
+++ b/demo/js/bezierSegmentCross.js
@@ -5,100 +5,95 @@
  * @description
  * 二次贝塞尔直线相交演示
  */
+import isBezierSegmentCross from 'graphics/isBezierSegmentCross';
 
-define(
-    function(require) {
+/**
+ * 初始化
+ */
+function main() {
+    let canvas = $('#canvas').get(0);
+    let ctx = canvas.getContext('2d');
+    let width = canvas.offsetWidth;
+    let height = canvas.offsetHeight;
 
-        var isBezierSegmentCross = require('graphics/isBezierSegmentCross');
+    let points = [
+        {x: 592, y: 427, onCurve: true},
+        {x: 552, y: 390},
+        {x: 496, y: 390, onCurve: true},
+        {x: 528, y: 453.29541, onCurve: true},
+        {x: 460, y: 100, onCurve: true}
+    ];
 
-        var entry = {
+    $(points).each(function (index, item) {
+        $('[data-index="' + index + '"]').css({
+            left: points[index].x,
+            top: points[index].y
+        });
+    });
 
-            /**
-             * 初始化
-             */
-            init: function() {
-                var canvas = $('#canvas').get(0);
-                var ctx = canvas.getContext('2d');
-                var width = canvas.offsetWidth;
-                var height = canvas.offsetHeight;
+    let point;
 
-                var points = [{"x":592,"y":427,"onCurve":true},{"x":552,"y":390},{"x":496,"y":390,"onCurve":true},{"x":528,"y":453.29541,"onCurve":true},{"x":460,"y":100,"onCurve":true}] ;
+    $('.point').on('mousedown', function (e) {
+        point = $(this);
+    });
 
-                $(points).each(function(index, item) {
-                    $('[data-index="'+index+'"]').css({
-                        left: points[index].x,
-                        top: points[index].y
-                    })
-                });
+    $(document.body).on('mousemove', onMove);
+    $(document.body).on('mouseup', function (e) {
+        onMove.call(this, e);
+        point = null;
+    });
 
-                var point;
-
-                $('.point').on('mousedown', function(e) {
-                    point = $(this);
-                });
-
-                $(document.body).on('mousemove', onMove);
-                $(document.body).on('mouseup', function(e) {
-                    onMove.call(this, e);
-                    point = null;
-                });
-
-                function onMove(e) {
-                    var px = e.pageX;
-                    var py = e.pageY;
-                    if(point) {
-                        point.css({
-                            left: px,
-                            top: py
-                        });
-                        var p = points[+point.attr('data-index')];
-                        p.x = px;
-                        p.y = py;
-                        draw();
-                    }
-                }
-
-                function draw() {
-
-
-                    ctx.clearRect(0, 0, width, height);
-                    //绘制2次贝塞尔曲线
-                    ctx.beginPath();
-                    ctx.strokeStyle='black';
-                    ctx.moveTo(points[0].x, points[0].y);
-                    ctx.quadraticCurveTo(points[1].x, points[1].y, points[2].x, points[2].y);
-                    ctx.moveTo(points[3].x, points[3].y);
-
-                    if(points[4]) {
-                        ctx.lineTo(points[4].x, points[4].y);
-                    }
-                    else {
-                        ctx.lineTo(1000, points[3].y);
-                    }
-
-                    ctx.lineWidth = 1;
-                    ctx.stroke();
-                    //console.time('bezier');
-                    var r = isBezierSegmentCross(points[0], points[1], points[2], points[3], points[4]);
-                    //console.timeEnd('bezier');
-                    console.log(r.length);
-
-                    if(r) {
-                        ctx.beginPath();
-                        r.forEach(function(item) {
-                            ctx.moveTo(item.x, item.y);
-                            ctx.arc(item.x, item.y, 4, 0, Math.PI * 2, true);
-                        });
-                        ctx.fill();
-                    }
-                }
-
-                draw();
-            }
-        };
-
-        entry.init();
-
-        return entry;
+    function onMove(e) {
+        let px = e.pageX;
+        let py = e.pageY;
+        if (point) {
+            point.css({
+                left: px,
+                top: py
+            });
+            let p = points[+point.attr('data-index')];
+            p.x = px;
+            p.y = py;
+            draw();
+        }
     }
-);
+
+    function draw() {
+
+
+        ctx.clearRect(0, 0, width, height);
+        // 绘制2次贝塞尔曲线
+        ctx.beginPath();
+        ctx.strokeStyle = 'black';
+        ctx.moveTo(points[0].x, points[0].y);
+        ctx.quadraticCurveTo(points[1].x, points[1].y, points[2].x, points[2].y);
+        ctx.moveTo(points[3].x, points[3].y);
+
+        if (points[4]) {
+            ctx.lineTo(points[4].x, points[4].y);
+        }
+        else {
+            ctx.lineTo(1000, points[3].y);
+        }
+
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        // console.time('bezier');
+        let r = isBezierSegmentCross(points[0], points[1], points[2], points[3], points[4]);
+        // console.timeEnd('bezier');
+        console.log(r.length);
+
+        if (r) {
+            ctx.beginPath();
+            r.forEach(function (item) {
+                ctx.moveTo(item.x, item.y);
+                ctx.arc(item.x, item.y, 4, 0, Math.PI * 2, true);
+            });
+            ctx.fill();
+        }
+    }
+
+    draw();
+}
+
+main();
diff --git a/demo/js/bezierSplit.js b/demo/js/bezierSplit.js
index 647c806..ce170d3 100644
--- a/demo/js/bezierSplit.js
+++ b/demo/js/bezierSplit.js
@@ -6,103 +6,92 @@
  * bezier分割
  */
 
-define(
-    function(require) {
+import splitBezier from 'math/bezierQ2Split';
 
-        var splitBezier = require('math/bezierQ2Split');
+function main() {
+    let canvas = $('#canvas').get(0);
+    let ctx = canvas.getContext('2d');
+    let width = canvas.offsetWidth;
+    let height = canvas.offsetHeight;
 
-        var entry = {
+    let points = [
+        {x: 400.74906, y: 658.69371, onCurve: true},
+        {x: 343.80109577246503, y: 678.5444583886682},
+        {x: 296, y: 722, onCurve: true},
+        {x: 484.52353, y: 642.49215, index0: 2, index1: 12, index: 18}
+    ];
 
-            /**
-             * 初始化
-             */
-            init: function () {
-                var canvas = $('#canvas').get(0);
-                var ctx = canvas.getContext('2d');
-                var width = canvas.offsetWidth;
-                var height = canvas.offsetHeight;
+    $(points).each(function (index, item) {
+        $('[data-index="' + index + '"]').css({
+            left: points[index].x,
+            top: points[index].y
+        });
+    });
 
-                var points =[{"x":400.74906,"y":658.69371,"onCurve":true},{"x":343.80109577246503,"y":678.5444583886682},{"x":296,"y":722,"onCurve":true},{"x":484.52353,"y":642.49215,"index0":2,"index1":12,"index":18}];
+    let point;
 
-                $(points).each(function(index, item) {
-                    $('[data-index="'+index+'"]').css({
-                        left: points[index].x,
-                        top: points[index].y
-                    })
-                });
+    $('.point').on('mousedown', function (e) {
+        point = $(this);
+    });
 
-                var point;
+    $(document.body).on('mousemove', onMove);
+    $(document.body).on('mouseup', function (e) {
+        onMove.call(this, e);
+        point = null;
+    });
 
-                $('.point').on('mousedown', function(e) {
-                    point = $(this);
-                });
-
-                $(document.body).on('mousemove', onMove);
-                $(document.body).on('mouseup', function(e) {
-                    onMove.call(this, e);
-                    point = null;
-                });
-
-                function onMove(e) {
-                    var px = e.pageX;
-                    var py = e.pageY;
-                    if(point) {
-                        point.css({
-                            left: px,
-                            top: py
-                        });
-                        var p = points[+point.attr('data-index')];
-                        p.x = px;
-                        p.y = py;
-                        draw();
-                    }
-                }
-
-                function getPoint(p0, p1, p2, t) {
-                    return {
-                        x: p0.x * Math.pow(1 - t, 2) + 2 * p1.x * t * (1-t) + p2.x * Math.pow(t, 2),
-                        y: p0.y * Math.pow(1 - t, 2) + 2 * p1.y * t * (1-t) + p2.y * Math.pow(t, 2)
-                    }
-                }
-
-                function draw() {
-
-
-                    ctx.clearRect(0, 0, width, height);
-                    //绘制2次贝塞尔曲线
-                    ctx.beginPath();
-                    ctx.lineWidth=2;
-                    ctx.strokeStyle='gray';
-
-                    ctx.moveTo(points[0].x, points[0].y);
-                    ctx.quadraticCurveTo(points[1].x,points[1].y,points[2].x,points[2].y);
-                    ctx.stroke();
-
-
-
-                    var result = splitBezier(points[0], points[1], points[2], getPoint(points[0], points[1], points[2], 0.5));
-                    //
-                    //var result = splitBezier(points[0], points[1], points[2], points[3]);
-
-                    result.forEach(function(bezier, i) {
-                        ctx.beginPath();
-                        ctx.lineWidth=1;
-                        ctx.strokeStyle = i ? 'blue' : 'red';
-                        ctx.moveTo(bezier[0].x, bezier[0].y);
-                        ctx.quadraticCurveTo(bezier[1].x, bezier[1].y, bezier[2].x, bezier[2].y);
-                        ctx.stroke();
-                    });
-
-
-
-                }
-
-                draw();
-            }
-        };
-
-        entry.init();
-
-        return entry;
+    function onMove(e) {
+        let px = e.pageX;
+        let py = e.pageY;
+        if (point) {
+            point.css({
+                left: px,
+                top: py
+            });
+            let p = points[+point.attr('data-index')];
+            p.x = px;
+            p.y = py;
+            draw();
+        }
     }
-);
+
+    function getPoint(p0, p1, p2, t) {
+        return {
+            x: p0.x * Math.pow(1 - t, 2) + 2 * p1.x * t * (1 - t) + p2.x * Math.pow(t, 2),
+            y: p0.y * Math.pow(1 - t, 2) + 2 * p1.y * t * (1 - t) + p2.y * Math.pow(t, 2)
+        };
+    }
+
+    function draw() {
+
+
+        ctx.clearRect(0, 0, width, height);
+        // 绘制2次贝塞尔曲线
+        ctx.beginPath();
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = 'gray';
+
+        ctx.moveTo(points[0].x, points[0].y);
+        ctx.quadraticCurveTo(points[1].x, points[1].y, points[2].x, points[2].y);
+        ctx.stroke();
+
+
+
+        let result = splitBezier(points[0], points[1], points[2], getPoint(points[0], points[1], points[2], 0.5));
+        result.forEach(function (bezier, i) {
+            ctx.beginPath();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = i ? 'blue' : 'red';
+            ctx.moveTo(bezier[0].x, bezier[0].y);
+            ctx.quadraticCurveTo(bezier[1].x, bezier[1].y, bezier[2].x, bezier[2].y);
+            ctx.stroke();
+        });
+
+
+
+    }
+
+    draw();
+}
+
+main();
diff --git a/demo/js/boundSegmentCross.js b/demo/js/boundSegmentCross.js
index 464605c..48988a2 100644
--- a/demo/js/boundSegmentCross.js
+++ b/demo/js/boundSegmentCross.js
@@ -1,100 +1,90 @@
 /**
  * @file quadraticBezier.js
  * @author mengke01
- * @date 
  * @description
  * 线段和bound相交
  */
 
-define(
-    function(require) {
+import isBoundingBoxSegmentCross from 'graphics/isBoundingBoxSegmentCross';
 
-        var isBoundingBoxSegmentCross = require('graphics/isBoundingBoxSegmentCross');
+function main() {
+    let canvas = $('#canvas').get(0);
+    let ctx = canvas.getContext('2d');
+    let width = canvas.offsetWidth;
+    let height = canvas.offsetHeight;
 
-        var entry = {
+    let points = [
+        {x: 50, y: 200},
+        {x: 97, y: 98},
+        {x: 58, y: 94},
+        {x: 105, y: 201}
+    ];
 
-            /**
-             * 初始化
-             */
-            init: function() {
-                var canvas = $('#canvas').get(0);
-                var ctx = canvas.getContext('2d');
-                var width = canvas.offsetWidth;
-                var height = canvas.offsetHeight;
+    $('[data-index]').each(function (index, item) {
+        $(item).css({
+            left: points[index].x,
+            top: points[index].y
+        });
+    });
 
-                var points = [{"x":50,"y":200},{"x":97,"y":98},{"x":58,"y":94},{"x":105,"y":201}];
+    let point;
 
-                $('[data-index]').each(function(index, item) {
-                    $(item).css({
-                        left: points[index].x,
-                        top: points[index].y
-                    })
-                });
+    $('.point').on('mousedown', function (e) {
+        point = $(this);
+    });
 
-                var point;
+    $(document.body).on('mousemove', onMove);
+    $(document.body).on('mouseup', function (e) {
+        onMove.call(this, e);
+        point = null;
+    });
 
-                $('.point').on('mousedown', function(e) {
-                    point = $(this);
-                });
+    function onMove(e) {
+        let px = e.pageX;
+        let py = e.pageY;
+        if (point) {
+            point.css({
+                left: px,
+                top: py
+            });
+            let p = points[+point.attr('data-index')];
+            p.x = px;
+            p.y = py;
+            draw();
+        }
+    }
 
-                $(document.body).on('mousemove', onMove);
-                $(document.body).on('mouseup', function(e) {
-                    onMove.call(this, e);
-                    point = null;
-                });
+    function draw() {
 
-                function onMove(e) {
-                    var px = e.pageX;
-                    var py = e.pageY;
-                    if(point) {
-                        point.css({
-                            left: px,
-                            top: py
-                        });
-                        var p = points[+point.attr('data-index')];
-                        p.x = px;
-                        p.y = py;
-                        draw();
-                    }
-                }
-
-                function draw() {
-                    
-                    var bound = {
-                        x: Math.min(points[0].x, points[1].x),
-                        y: Math.min(points[0].y, points[1].y),
-                        width: Math.abs(points[0].x - points[1].x),
-                        height: Math.abs(points[0].y - points[1].y)
-                    };
-
-                    ctx.clearRect(0, 0, width, height);
-                    //绘制2次贝塞尔曲线  
-                    ctx.beginPath();
-                    ctx.strokeStyle='black';
-                    ctx.moveTo(bound.x, bound.y);  
-                    ctx.lineTo(bound.x, bound.y + bound.height);
-                    ctx.lineTo(bound.x + bound.width, bound.y + bound.height);
-                    ctx.lineTo(bound.x + bound.width, bound.y);
-                    ctx.lineTo(bound.x, bound.y);
-
-                    ctx.moveTo(points[2].x, points[2].y);
-                    ctx.lineTo(points[3].x, points[3].y);
-
-                    ctx.lineWidth = 1;
-                    ctx.stroke();
-                    //console.time('bezier');
-                    var r = isBoundingBoxSegmentCross(bound, points[2], points[3]);
-                    //console.timeEnd('bezier');
-                    console.log(r);
-
-                }
-
-                draw();
-            }
+        let bound = {
+            x: Math.min(points[0].x, points[1].x),
+            y: Math.min(points[0].y, points[1].y),
+            width: Math.abs(points[0].x - points[1].x),
+            height: Math.abs(points[0].y - points[1].y)
         };
 
-        entry.init();
-        
-        return entry;
+        ctx.clearRect(0, 0, width, height);
+        // 绘制2次贝塞尔曲线
+        ctx.beginPath();
+        ctx.strokeStyle = 'black';
+        ctx.moveTo(bound.x, bound.y);
+        ctx.lineTo(bound.x, bound.y + bound.height);
+        ctx.lineTo(bound.x + bound.width, bound.y + bound.height);
+        ctx.lineTo(bound.x + bound.width, bound.y);
+        ctx.lineTo(bound.x, bound.y);
+
+        ctx.moveTo(points[2].x, points[2].y);
+        ctx.lineTo(points[3].x, points[3].y);
+
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        // console.time('bezier');
+        let r = isBoundingBoxSegmentCross(bound, points[2], points[3]);
+        // console.timeEnd('bezier');
+        console.log(r);
+
     }
-);
\ No newline at end of file
+
+    draw();
+}
+main();
diff --git a/demo/js/canvasFindBreakPoint.js b/demo/js/canvasFindBreakPoint.js
index ee68560..b302b1c 100644
--- a/demo/js/canvasFindBreakPoint.js
+++ b/demo/js/canvasFindBreakPoint.js
@@ -3,224 +3,217 @@
  * @author mengke01(kekee000@gmail.com)
  */
 
-define(
-    function (require) {
+import ImageProcessor from 'graphics/image/ImageProcessor';
+import ContourPointsProcessor from 'graphics/image/ContourPointsProcessor';
 
-        var ImageProcessor = require('graphics/image/ImageProcessor');
-        var ContourPointsProcessor = require('graphics/image/ContourPointsProcessor');
+import drawPath from 'render/util/drawPath';
+import pathUtil from 'graphics/pathUtil';
+import lang from 'common/lang';
 
-        var drawPath = require('render/util/drawPath');
-        var pathUtil = require('graphics/pathUtil');
-        var lang = require('common/lang');
+let ctx = null;
+let canvas = null;
+let curImage = null;
+let processor = null;
+let pointsProcessor = new ContourPointsProcessor();
 
-        var ctx = null;
-        var canvas = null;
-        var curImage = null;
-        var processor = null;
-        var pointsProcessor = new ContourPointsProcessor();;
+function getOptions() {
+    return {
+        threshold: $('#threshold-fn').val() ? $('#threshold-fn').val() : +$('#threshold-gray').val(),
+        reverse: !!$('#threshold-reverse').get(0).checked
+    };
+}
 
-        function getOptions() {
-            return {
-                threshold: $('#threshold-fn').val() ? $('#threshold-fn').val() : +$('#threshold-gray').val(),
-                reverse: !!$('#threshold-reverse').get(0).checked
-            }
-        }
+function onUpFileChange(e) {
+    let file = e.target.files[0];
+    let reader = new FileReader();
+    reader.onload = function (e) {
 
-        function onUpFileChange(e) {
-            var file = e.target.files[0];
-            var reader = new FileReader();
-            reader.onload = function(e) {
-
-                var image = curImage = new Image();
-                image.onload = function () {
-                    refreshImg(image);
-                    refresh();
-                };
-
-                image.src = e.target.result;
-            }
-
-            reader.onerror = function(e) {
-                console.error(e);
-            };
-
-            reader.readAsDataURL(file);
-        }
-
-        function refresh() {
-            var width = canvas.width;
-            var height = canvas.height;
-            var imgData = ctx.getImageData(0, 0, width, height);
-
-            if (!processor.get().binarize) {
-                processor.binarize(+$('#threshold-gray').val());
-            }
-
-            result = processor.get();
-
-            var putData = imgData.data;
-            for (var y = 0; y < height; y ++) {
-                var line = width * y;
-                for (var x = 0; x < width; x++) {
-                    var offset = line + x;
-                    if (result.data[offset] === 0) {
-                        putData[offset * 4] = 208;
-                        putData[offset * 4 + 1] = 247;
-                        putData[offset * 4 + 2] = 113;
-                        putData[offset * 4 + 3] = 255;
-                    }
-                    else {
-                        putData[offset * 4] = 255;
-                        putData[offset * 4 + 1] = 255;
-                        putData[offset * 4 + 2] = 255;
-                        putData[offset * 4 + 3] = 255;
-                    }
-                }
-            }
-
-            pointsProcessor.import(result);
-            var contoursPoints = pointsProcessor.get();
-
-            contoursPoints.forEach(function (contour) {
-                var flag = contour.flag;
-                for (var i = 0, l = contour.length; i < l; i++) {
-                    var p = contour[i];
-                    var offset = p.y * width + p.x;
-                    putData[offset * 4] = flag ? 100 : 255;
-                    putData[offset * 4 + 1] = 0;
-                    putData[offset * 4 + 2] = 0;
-                    putData[offset * 4 + 3] = 255;
-                }
-            });
-
-            ctx.putImageData(imgData, 0, 0);
-
-            setTimeout(function() {
-                if (!!$('#show-breakpoints').get(0).checked) {
-                    getBreakPoints(contoursPoints);
-                }
-                getContours(contoursPoints);
-            }, 20);
-
-        }
-
-        function getBreakPoints(contoursPoints) {
-            // 绘制关键点
-            ctx.beginPath();
-            pointsProcessor.getBreakPoints().forEach(function (p) {
-                if (p.breakPoint) {
-                    ctx.fillStyle = 'red';
-                }
-                else if (p.inflexion) {
-                    ctx.fillStyle = 'blue';
-                }
-                ctx.fillRect(p.x, p.y, p.right == 1 ? 6 : 3, p.right == 1 ? 6 : 3);
-            });
-        }
-
-        function getContours(contoursPoints) {
-
-            var result = processor.get();
-            var canvas = $('#canvas-glyf').get(0);
-            canvas.width = result.width;
-            canvas.height = result.height;
-            var ctx = canvas.getContext('2d');
-            ctx.clearRect(0, 0, result.width, result.height);
-
-            // 绘制拟合曲线
-            ctx.fillStyle = 'green';
-            ctx.beginPath();
-            pointsProcessor.getContours().forEach(function (contour) {
-                drawPath(ctx, contour);
-            });
-            ctx.fill();
-        }
-
-
-        function refreshImg(image) {
-            var width = image.width;
-            var height = image.height;
-            canvas.width = image.width;
-            canvas.height = image.height;
-
-            ctx.drawImage(image, 0, 0, width, height);
-            var imgData = ctx.getImageData(0, 0, width, height);
-            processor = new ImageProcessor(imgData);
-            processor.filters = {};
-            processor.save();
-        }
-
-        function binarize() {
-            processor.restore();
-
-            if (processor.filters.reverse) {
-                processor.reverse();
-            }
-
-            if (processor.filters.gaussBlur) {
-                processor.gaussBlur(processor.filters.gaussBlur);
-            }
-
-            processor.binarize(+$('#threshold-gray').val());
-        }
-
-        var entry = {
-
-            /**
-             * 初始化
-             */
-            init: function () {
-
-                document.getElementById('upload-file').addEventListener('change', onUpFileChange);
-                canvas = document.getElementById("canvas");
-                ctx = canvas.getContext("2d");
-
-                $('[data-action]').on('click', function () {
-                    var action = $(this).data('action');
-
-                    if (action === 'fitwindow') {
-                        var fit = $(this).get(0).checked;
-                        $('#canvas')[fit ? 'addClass' : 'removeClass']('fitwindow');
-                        $('#canvas-glyf')[fit ? 'addClass' : 'removeClass']('fitwindow');
-                        return;
-                    }
-                    else if (action === 'binarize') {
-                        binarize();
-                    }
-                    else if (action === 'restore') {
-                        processor.filters = {};
-                        $('[data-action="reverse"]').get(0).checked = false;
-                        $('[data-action="gaussBlur"]').val(0);
-                        binarize();
-                    }
-                    else if (action === 'open' || action === 'close' || action === 'dilate' || action === 'erode') {
-                        processor[action]();
-                    }
-                    else if (action === 'reverse') {
-                        processor.filters.reverse = !!this.checked;
-                        binarize();
-                    }
-                    else if (action === 'gaussBlur') {
-                        processor.filters.gaussBlur = +$(this).val();
-                        binarize();
-                    }
-
-                    refresh();
-                });
-
-                var img = new Image();
-
-                img.onload = function () {
-                    refreshImg(img);
-                    refresh();
-                }
-
-                img.src = './test/question.png';
-            }
+        let image = curImage = new Image();
+        image.onload = function () {
+            refreshImg(image);
+            refresh();
         };
 
-        entry.init();
+        image.src = e.target.result;
+    };
 
-        return entry;
+    reader.onerror = function (e) {
+        console.error(e);
+    };
+
+    reader.readAsDataURL(file);
+}
+
+function refresh() {
+    let width = canvas.width;
+    let height = canvas.height;
+    let imgData = ctx.getImageData(0, 0, width, height);
+
+    if (!processor.get().binarize) {
+        processor.binarize(+$('#threshold-gray').val());
     }
-);
+
+    let result = processor.get();
+
+    let putData = imgData.data;
+    for (let y = 0; y < height; y++) {
+        let line = width * y;
+        for (let x = 0; x < width; x++) {
+            let offset = line + x;
+            if (result.data[offset] === 0) {
+                putData[offset * 4] = 208;
+                putData[offset * 4 + 1] = 247;
+                putData[offset * 4 + 2] = 113;
+                putData[offset * 4 + 3] = 255;
+            }
+            else {
+                putData[offset * 4] = 255;
+                putData[offset * 4 + 1] = 255;
+                putData[offset * 4 + 2] = 255;
+                putData[offset * 4 + 3] = 255;
+            }
+        }
+    }
+
+    pointsProcessor.import(result);
+    let contoursPoints = pointsProcessor.get();
+
+    contoursPoints.forEach(function (contour) {
+        let flag = contour.flag;
+        for (let i = 0, l = contour.length; i < l; i++) {
+            let p = contour[i];
+            let offset = p.y * width + p.x;
+            putData[offset * 4] = flag ? 100 : 255;
+            putData[offset * 4 + 1] = 0;
+            putData[offset * 4 + 2] = 0;
+            putData[offset * 4 + 3] = 255;
+        }
+    });
+
+    ctx.putImageData(imgData, 0, 0);
+
+    setTimeout(function () {
+        if (!!$('#show-breakpoints').get(0).checked) {
+            getBreakPoints(contoursPoints);
+        }
+        getContours(contoursPoints);
+    }, 20);
+
+}
+
+function getBreakPoints(contoursPoints) {
+    // 绘制关键点
+    ctx.beginPath();
+    pointsProcessor.getBreakPoints().forEach(function (p) {
+        if (p.breakPoint) {
+            ctx.fillStyle = 'red';
+        }
+        else if (p.inflexion) {
+            ctx.fillStyle = 'blue';
+        }
+        ctx.fillRect(p.x, p.y, +p.right === 1 ? 6 : 3, +p.right === 1 ? 6 : 3);
+    });
+}
+
+function getContours(contoursPoints) {
+
+    let result = processor.get();
+    let canvas = $('#canvas-glyf').get(0);
+    canvas.width = result.width;
+    canvas.height = result.height;
+    let ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, result.width, result.height);
+
+    // 绘制拟合曲线
+    ctx.fillStyle = 'green';
+    ctx.beginPath();
+    pointsProcessor.getContours().forEach(function (contour) {
+        drawPath(ctx, contour);
+    });
+    ctx.fill();
+}
+
+
+function refreshImg(image) {
+    let width = image.width;
+    let height = image.height;
+    canvas.width = image.width;
+    canvas.height = image.height;
+
+    ctx.drawImage(image, 0, 0, width, height);
+    let imgData = ctx.getImageData(0, 0, width, height);
+    processor = new ImageProcessor(imgData);
+    processor.filters = {};
+    processor.save();
+}
+
+function binarize() {
+    processor.restore();
+
+    if (processor.filters.reverse) {
+        processor.reverse();
+    }
+
+    if (processor.filters.gaussBlur) {
+        processor.gaussBlur(processor.filters.gaussBlur);
+    }
+
+    processor.binarize(+$('#threshold-gray').val());
+}
+
+let entry = {
+
+    /**
+     * 初始化
+     */
+    init() {
+
+        document.getElementById('upload-file').addEventListener('change', onUpFileChange);
+        canvas = document.getElementById('canvas');
+        ctx = canvas.getContext('2d');
+
+        $('[data-action]').on('click', function () {
+            let action = $(this).data('action');
+
+            if (action === 'fitwindow') {
+                let fit = $(this).get(0).checked;
+                $('#canvas')[fit ? 'addClass' : 'removeClass']('fitwindow');
+                $('#canvas-glyf')[fit ? 'addClass' : 'removeClass']('fitwindow');
+                return;
+            }
+            else if (action === 'binarize') {
+                binarize();
+            }
+            else if (action === 'restore') {
+                processor.filters = {};
+                $('[data-action="reverse"]').get(0).checked = false;
+                $('[data-action="gaussBlur"]').val(0);
+                binarize();
+            }
+            else if (action === 'open' || action === 'close' || action === 'dilate' || action === 'erode') {
+                processor[action]();
+            }
+            else if (action === 'reverse') {
+                processor.filters.reverse = !!this.checked;
+                binarize();
+            }
+            else if (action === 'gaussBlur') {
+                processor.filters.gaussBlur = +$(this).val();
+                binarize();
+            }
+
+            refresh();
+        });
+
+        let img = new Image();
+
+        img.onload = function () {
+            refreshImg(img);
+            refresh();
+        };
+
+        img.src = './test/question.png';
+    }
+};
+
+entry.init();
diff --git a/demo/js/contoursCombine.js b/demo/js/contoursCombine.js
index fe66c29..c79f1ad 100644
--- a/demo/js/contoursCombine.js
+++ b/demo/js/contoursCombine.js
@@ -6,38 +6,27 @@
  * 路径合并，求交
  */
 
-define(
-    function(require) {
+import lang from 'common/lang';
+import editor from 'editor/main';
+import shape_baidu from 'demo/../data/contours-2';
 
-        var lang = require('common/lang');
-        var editor = require('editor/main');
-        var shape_baidu = require('demo/../data/contours-2');
-        var isPathCross = require('graphics/isPathCross');
-        var util = require('graphics/util');
+let currentEditor;
 
-        var currentEditor;
+const entry = {
 
-        var entry = {
+    /**
+     * 初始化
+     */
+    init() {
+        let clonedShape = lang.clone(shape_baidu);
 
-            /**
-             * 初始化
-             */
-            init: function () {
-                var clonedShape = lang.clone(shape_baidu);
-
-                window.editor = currentEditor = editor.create($('#render-view').get(0));
-                currentEditor.setFont(clonedShape);
-
-                var jointLayer = currentEditor.fontLayer;
-
-                var paths = currentEditor.fontLayer.shapes.map(function(shape) {
-                    return shape.points;
-                });
-            }
-        };
-
-        entry.init();
-
-        return entry;
+        window.editor = currentEditor = editor.create($('#render-view').get(0));
+        currentEditor.setFont(clonedShape);
+        let jointLayer = currentEditor.fontLayer;
+        let paths = currentEditor.fontLayer.shapes.map(function (shape) {
+            return shape.points;
+        });
     }
-);
+};
+
+entry.init();
diff --git a/demo/js/datastore.js b/demo/js/datastore.js
index dc8dc65..566425d 100644
--- a/demo/js/datastore.js
+++ b/demo/js/datastore.js
@@ -3,50 +3,42 @@
  * @author mengke01(kekee000@gmail.com)
  */
 
-define(
-    function (require) {
-        var DataStore = require('common/DataStore');
+import DataStore from 'common/DataStore';
 
 
-        var entry = {
+const entry = {
 
-            /**
-             * 初始化
-             */
-            init: function () {
+    /**
+     * 初始化
+     */
+    init() {
 
-                var store = new DataStore({
-                    name: 'test',
-                    storeName: 'test-project'
-                });
+        let store = new DataStore({
+            name: 'test',
+            storeName: 'test-project'
+        });
 
-                store.open(function(e) {
+        store.open(function (e) {
 
-                    store.add(1001, 'sssss', function() {
-                        store.clear();
-                        store.close();
-                    });
+            store.add(1001, 'sssss', function () {
+                store.clear();
+                store.close();
+            });
 
-                },function(e) {
-                    console.log(e);
-                });
+        }, function (e) {
+            console.log(e);
+        });
 
-                var store1 = new DataStore({
-                    name: 'test',
-                    storeName: 'test-project-1'
-                });
+        let store1 = new DataStore({
+            name: 'test',
+            storeName: 'test-project-1'
+        });
 
-                store1.open(function() {
-                    store.removeStore('test-project-1');
-                    store.close();
-                });
-
-
-            }
-        };
-
-        entry.init();
-
-        return entry;
+        store1.open(function () {
+            store.removeStore('test-project-1');
+            store.close();
+        });
     }
-);
+};
+
+entry.init();
diff --git a/demo/js/editor-iframe.js b/demo/js/editor-iframe.js
index 4e3fd39..bdc9c7f 100644
--- a/demo/js/editor-iframe.js
+++ b/demo/js/editor-iframe.js
@@ -3,8 +3,9 @@
  * @author mengke01(kekee000@gmail.com)
  */
 
+/* eslint-disable fecs-camelcase */
 
-define(function (require) {
+class Editor {
 
     /**
      * 用于远程 editor 编辑器接口，由于使用postMessage进行跨域调用，
@@ -14,7 +15,7 @@ define(function (require) {
      * @param {jQuery|HTMLElement} options.main 主元素，iframe对象或者jquery对象
      * @param {string=} options.url editor接口
      */
-    function Editor(options) {
+    constructor(options) {
         this.main = $(options.main);
         this.url = options.url || '../editor.html';
         this.key = 'editor-' + Math.random();
@@ -24,8 +25,8 @@ define(function (require) {
 
         // 注册默认监听的事件
         this.events = {
-            load: function () {
-                var me = this;
+            load() {
+                let me = this;
                 this.readyList.forEach(function (promise) {
                     promise.resolve(me);
                 });
@@ -34,8 +35,8 @@ define(function (require) {
             }
         };
 
-        var url = this.url + (this.url.indexOf('?') >= 0 ? '&' : '?') + 'key=' + this.key;
-        var frame = this.main[0];
+        let url = this.url + (this.url.indexOf('?') >= 0 ? '&' : '?') + 'key=' + this.key;
+        let frame = this.main[0];
         frame.src = url;
         window.addEventListener('message', this.onMessage);
     }
@@ -45,8 +46,8 @@ define(function (require) {
      *
      * @return {Promise}
      */
-    Editor.prototype.ready = function () {
-        var promise = $.Deferred();
+    ready() {
+        let promise = $.Deferred();
         if (this.loaded) {
             promise.resolve(this);
         }
@@ -54,7 +55,7 @@ define(function (require) {
             this.readyList.push(promise);
         }
         return promise;
-    };
+    }
 
     /**
      * 设置字体格式
@@ -62,41 +63,40 @@ define(function (require) {
      * @param {Object} font 字体格式
      * @return {Promise}
      */
-    Editor.prototype.setFont = function (font) {
+    setFont(font) {
         return this.postMessage('setFont', [font]);
-    };
+    }
 
     /**
      * 获取字体格式
      *
      * @return {Promise}
      */
-    Editor.prototype.getFont = function () {
+    getFont() {
         return this.postMessage('getFont');
-    };
+    }
 
     /**
      * 执行命令
      *
-     * @param {string} name 命令
-     * @param {Array?} args 命令参数列表
+     * @param {...Array} args 命令参数列表
      * @return {Promise}
      */
-    Editor.prototype.execCommand = function () {
-        return this.postMessage('execCommand', [].slice.call(arguments));
-    };
+    execCommand(...args) {
+        return this.postMessage('execCommand', args);
+    }
 
     /**
      * 获取editor对象，用来进行同域时候的精细化调用
      *
      * @return {Editor}
      */
-    Editor.prototype.getEditor = function () {
+    getEditor() {
         return this.main[0].contentWindow.editor;
-    };
+    }
 
-    Editor.prototype.postMessage = function (name, args) {
-        var stamp = Date.now();
+    postMessage(name, args) {
+        let stamp = Date.now();
         if (this.events[stamp]) {
             throw new Error('call proxy function to quickly:' + name);
         }
@@ -109,47 +109,44 @@ define(function (require) {
             data: args || null
         }, '*');
         return this.events[stamp];
-    };
+    }
 
-    Editor.prototype.onMessage = function (e) {
+    onMessage(e) {
         if (e.data.key === this.key) {
-            var name = e.data.name;
-            var data = e.data.data;
-            var stamp = e.data.stamp;
+            let name = e.data.name;
+            let data = e.data.data;
+            let stamp = e.data.stamp;
             if (stamp && this.events[stamp]) {
                 this.events[stamp].resolve(data);
                 delete this.events[stamp];
             }
             else if (this.events[name]) {
-                this.events[name].call(this, data)
+                this.events[name].call(this, data);
             }
         }
-    };
+    }
 
-    Editor.prototype.dispose = function () {
+    dispose() {
         this.main.remove();
         this.events = this.main = null;
-    };
+    }
+}
 
 
-
-    var shape_baidu = require('demo/../data/contours-5');
-    var editor = new Editor({
-        main: '.editor-frame'
-    })
-
-
-    editor.ready().then(function (editor) {
-        editor.setFont(shape_baidu).then(function () {
-            editor.execCommand('rescale', 0.5)
-        })
-    })
-
-    $('#get-font').on('click', function () {
-        editor.getFont().then(function (data) {
-            console.log(data)
-        })
-    })
-
-    return {};
+let shape_baidu = require('../data/contours-5');
+let editor = new Editor({
+    main: '.editor-frame'
+});
+
+
+editor.ready().then(function (editor) {
+    editor.setFont(shape_baidu).then(function () {
+        editor.execCommand('rescale', 0.5);
+    });
+});
+
+$('#get-font').on('click', function () {
+    editor.getFont().then(function (data) {
+        console.log(data);
+    });
 });
diff --git a/package.json b/package.json
index 23e9710..da6a905 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "description": "ttf to woff, woff2, svg, eot convert, ttf adjust",
   "scripts": {
     "dev": "webpack-dev-server --open --config ./config/webpack.dev.js",
+    "demo": "webpack-dev-server --open --config ./config/webpack.demo.js",
     "prod": "webpack --production --config ./config/webpack.prod.js",
     "build": "sh build.sh"
   },