diff --git a/package.json b/package.json
index 0f0ccc3..0c7f804 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dplayer",
-  "version": "1.17.4",
+  "version": "1.17.5",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "style": "dist/DPlayer.min.css",
diff --git a/src/DPlayer.scss b/src/css/index.scss
similarity index 99%
rename from src/DPlayer.scss
rename to src/css/index.scss
index 40189e4..f75469d 100644
--- a/src/DPlayer.scss
+++ b/src/css/index.scss
@@ -1,4 +1,4 @@
-@import '../node_modules/balloon-css/balloon.css';
+@import '../../node_modules/balloon-css/balloon.css';
 
 .dplayer {
     position: relative;
diff --git a/src/DPlayer.js b/src/js/DPlayer.js
similarity index 99%
rename from src/DPlayer.js
rename to src/js/DPlayer.js
index f641d2c..d34f407 100644
--- a/src/DPlayer.js
+++ b/src/js/DPlayer.js
@@ -1,5 +1,3 @@
-import './DPlayer.scss';
-
 import utils, { isMobile } from './utils';
 import handleOption from './options';
 import i18n from './i18n';
@@ -497,4 +495,4 @@ class DPlayer {
     }
 }
 
-module.exports = DPlayer;
+export default DPlayer;
diff --git a/src/api.js b/src/js/api.js
similarity index 98%
rename from src/api.js
rename to src/js/api.js
index 0af37fe..f635676 100644
--- a/src/api.js
+++ b/src/js/api.js
@@ -27,7 +27,7 @@ const SendXMLHttpRequest = (url, data, success, error, fail) => {
     xhr.send(data !== null ? JSON.stringify(data) : null);
 };
 
-module.exports = {
+export default {
     send: (endpoint, danmakuData, callback) => {
         SendXMLHttpRequest(endpoint, danmakuData, (xhr, response) => {
             console.log('Post danmaku: ', response);
diff --git a/src/bar.js b/src/js/bar.js
similarity index 97%
rename from src/bar.js
rename to src/js/bar.js
index 929a131..5fb1c4d 100644
--- a/src/bar.js
+++ b/src/js/bar.js
@@ -25,4 +25,4 @@ class Bar {
     }
 }
 
-module.exports = Bar;
\ No newline at end of file
+export default Bar;
\ No newline at end of file
diff --git a/src/bezel.js b/src/js/bezel.js
similarity index 94%
rename from src/bezel.js
rename to src/js/bezel.js
index a277bba..013997d 100644
--- a/src/bezel.js
+++ b/src/js/bezel.js
@@ -13,4 +13,4 @@ class Bezel {
     }
 }
 
-module.exports = Bezel;
\ No newline at end of file
+export default Bezel;
\ No newline at end of file
diff --git a/src/comment.js b/src/js/comment.js
similarity index 99%
rename from src/comment.js
rename to src/js/comment.js
index ce2f5b8..4b2f0f2 100644
--- a/src/comment.js
+++ b/src/js/comment.js
@@ -90,4 +90,4 @@ class Comment {
     }
 }
 
-module.exports = Comment;
\ No newline at end of file
+export default Comment;
\ No newline at end of file
diff --git a/src/contextmenu.js b/src/js/contextmenu.js
similarity index 98%
rename from src/contextmenu.js
rename to src/js/contextmenu.js
index 37f9cd0..599fed4 100644
--- a/src/contextmenu.js
+++ b/src/js/contextmenu.js
@@ -49,4 +49,4 @@ class ContextMenu {
     }
 }
 
-module.exports = ContextMenu;
\ No newline at end of file
+export default ContextMenu;
\ No newline at end of file
diff --git a/src/controller.js b/src/js/controller.js
similarity index 99%
rename from src/controller.js
rename to src/js/controller.js
index c3e2c2c..a921eae 100644
--- a/src/controller.js
+++ b/src/js/controller.js
@@ -251,4 +251,4 @@ class Controller {
     }
 }
 
-module.exports = Controller;
\ No newline at end of file
+export default Controller;
\ No newline at end of file
diff --git a/src/danmaku.js b/src/js/danmaku.js
similarity index 99%
rename from src/danmaku.js
rename to src/js/danmaku.js
index 3b3d9ce..c68aa04 100644
--- a/src/danmaku.js
+++ b/src/js/danmaku.js
@@ -340,4 +340,4 @@ class Danmaku {
     }
 }
 
-module.exports = Danmaku;
+export default Danmaku;
diff --git a/src/events.js b/src/js/events.js
similarity index 98%
rename from src/events.js
rename to src/js/events.js
index d52a050..f7af709 100644
--- a/src/events.js
+++ b/src/js/events.js
@@ -53,4 +53,4 @@ class Events {
     }
 }
 
-module.exports = Events;
+export default Events;
diff --git a/src/fullscreen.js b/src/js/fullscreen.js
similarity index 99%
rename from src/fullscreen.js
rename to src/js/fullscreen.js
index 3719ff9..87c5f11 100644
--- a/src/fullscreen.js
+++ b/src/js/fullscreen.js
@@ -101,4 +101,4 @@ class FullScreen {
     }
 }
 
-module.exports = FullScreen;
+export default FullScreen;
diff --git a/src/hotkey.js b/src/js/hotkey.js
similarity index 98%
rename from src/hotkey.js
rename to src/js/hotkey.js
index 44afa63..82748a7 100644
--- a/src/hotkey.js
+++ b/src/js/hotkey.js
@@ -52,4 +52,4 @@ class HotKey {
     }
 }
 
-module.exports = HotKey;
\ No newline at end of file
+export default HotKey;
\ No newline at end of file
diff --git a/src/i18n.js b/src/js/i18n.js
similarity index 98%
rename from src/i18n.js
rename to src/js/i18n.js
index aaa5f9f..46e4892 100644
--- a/src/i18n.js
+++ b/src/js/i18n.js
@@ -7,7 +7,7 @@ W3C def language codes is :
 NOTE: use lowercase to prevent case typo from user!
 Use this as shown below..... */
 
-module.exports = function (lang) {
+function i18n (lang) {
     this.lang = lang;
     this.tran = (text) => {
         if (tranTxt[this.lang] && tranTxt[this.lang][text]) {
@@ -17,7 +17,7 @@ module.exports = function (lang) {
             return text;
         }
     };
-};
+}
 
 // add translation text here
 const tranTxt = {
@@ -93,4 +93,6 @@ const tranTxt = {
         'Volume': '音量',
         'Live': '直播',
     }
-};
\ No newline at end of file
+};
+
+export default i18n;
\ No newline at end of file
diff --git a/src/index.js b/src/js/index.js
similarity index 73%
rename from src/index.js
rename to src/js/index.js
index 70d12ce..21b83ea 100644
--- a/src/index.js
+++ b/src/js/index.js
@@ -1,4 +1,7 @@
+import '../css/index.scss';
+import DPlayer from './DPlayer';
+
 /* global DPLAYER_VERSION GIT_HASH */
 console.log(`${'\n'} %c DPlayer ${DPLAYER_VERSION} ${GIT_HASH} %c http://dplayer.js.org ${'\n'}${'\n'}`, 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
 
-module.exports = require('./DPlayer');
\ No newline at end of file
+export default DPlayer;
\ No newline at end of file
diff --git a/src/options.js b/src/js/options.js
similarity index 99%
rename from src/options.js
rename to src/js/options.js
index b1ea395..e5493a9 100644
--- a/src/options.js
+++ b/src/js/options.js
@@ -1,7 +1,7 @@
 /* global DPLAYER_VERSION GIT_HASH */
-const defaultApiBackend = require('./api.js');
+import defaultApiBackend from './api.js';
 
-module.exports = (options) => {
+export default (options) => {
     const isMobile = /mobile/i.test(window.navigator.userAgent);
     // compatibility: some mobile browsers don't suppose autoplay
     if (isMobile) {
diff --git a/src/setting.js b/src/js/setting.js
similarity index 99%
rename from src/setting.js
rename to src/js/setting.js
index 344bd01..4416319 100644
--- a/src/setting.js
+++ b/src/js/setting.js
@@ -130,4 +130,4 @@ class Setting {
     }
 }
 
-module.exports = Setting;
\ No newline at end of file
+export default Setting;
\ No newline at end of file
diff --git a/src/subtitle.js b/src/js/subtitle.js
similarity index 98%
rename from src/subtitle.js
rename to src/js/subtitle.js
index 9a08e78..8d075ba 100644
--- a/src/subtitle.js
+++ b/src/js/subtitle.js
@@ -52,4 +52,4 @@ class Subtitle {
     }
 }
 
-module.exports = Subtitle;
\ No newline at end of file
+export default Subtitle;
\ No newline at end of file
diff --git a/src/svg.js b/src/js/svg.js
similarity index 96%
rename from src/svg.js
rename to src/js/svg.js
index 82b8606..1e90b4c 100644
--- a/src/svg.js
+++ b/src/js/svg.js
@@ -21,4 +21,4 @@ class SvgSource {
     }
 }
 
-module.exports = SvgSource;
+export default SvgSource;
diff --git a/src/template.js b/src/js/template.js
similarity index 99%
rename from src/template.js
rename to src/js/template.js
index 36b1246..49841d9 100644
--- a/src/template.js
+++ b/src/js/template.js
@@ -341,4 +341,4 @@ class Template {
     }
 }
 
-module.exports = Template;
+export default Template;
diff --git a/src/thumbnails.js b/src/js/thumbnails.js
similarity index 97%
rename from src/thumbnails.js
rename to src/js/thumbnails.js
index d6fee64..66271c5 100644
--- a/src/thumbnails.js
+++ b/src/js/thumbnails.js
@@ -29,4 +29,4 @@ class Thumbnails {
     }
 }
 
-module.exports = Thumbnails;
\ No newline at end of file
+export default Thumbnails;
\ No newline at end of file
diff --git a/src/time.js b/src/js/time.js
similarity index 99%
rename from src/time.js
rename to src/js/time.js
index 747f4a0..a24bf13 100644
--- a/src/time.js
+++ b/src/js/time.js
@@ -100,4 +100,4 @@ class Time {
     }
 }
 
-module.exports = Time;
\ No newline at end of file
+export default Time;
\ No newline at end of file
diff --git a/src/user.js b/src/js/user.js
similarity index 97%
rename from src/user.js
rename to src/js/user.js
index 85ea2fa..cea9f7c 100644
--- a/src/user.js
+++ b/src/js/user.js
@@ -38,4 +38,4 @@ class User {
     }
 }
 
-module.exports = User;
\ No newline at end of file
+export default User;
\ No newline at end of file
diff --git a/src/utils.js b/src/js/utils.js
similarity index 99%
rename from src/utils.js
rename to src/js/utils.js
index 2a40b5d..8535557 100644
--- a/src/utils.js
+++ b/src/js/utils.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 
     /**
     * Parse second to 00:00 format
diff --git a/webpack/dev.config.js b/webpack/dev.config.js
index 6b1084d..58d4b8c 100644
--- a/webpack/dev.config.js
+++ b/webpack/dev.config.js
@@ -9,7 +9,7 @@ module.exports = {
     devtool: 'cheap-module-source-map',
 
     entry: {
-        'DPlayer': './src/index.js'
+        'DPlayer': './src/js/index.js'
     },
 
     output: {
@@ -17,6 +17,7 @@ module.exports = {
         filename: '[name].js',
         library: '[name]',
         libraryTarget: 'umd',
+        libraryExport: 'default',
         umdNamedDefine: true,
         publicPath: '/'
     },
@@ -33,7 +34,7 @@ module.exports = {
                 test: /\.js$/,
                 enforce: 'pre',
                 loader: require.resolve('eslint-loader'),
-                include: path.resolve(__dirname, '../src'),
+                include: path.resolve(__dirname, '../src/js'),
             },
             {
                 test: /\.js$/,
diff --git a/webpack/prod.config.js b/webpack/prod.config.js
index a996bc1..bdb89e6 100644
--- a/webpack/prod.config.js
+++ b/webpack/prod.config.js
@@ -12,7 +12,7 @@ module.exports = {
     devtool: 'source-map',
 
     entry: {
-        'DPlayer': './src/index.js'
+        'DPlayer': './src/js/index.js'
     },
 
     output: {
@@ -20,6 +20,7 @@ module.exports = {
         filename: '[name].min.js',
         library: '[name]',
         libraryTarget: 'umd',
+        libraryExport: 'default',
         umdNamedDefine: true,
         publicPath: '/'
     },
@@ -36,7 +37,7 @@ module.exports = {
                 test: /\.js$/,
                 enforce: 'pre',
                 loader: require.resolve('eslint-loader'),
-                include: path.resolve(__dirname, '../src'),
+                include: path.resolve(__dirname, '../src/js'),
             },
             {
                 test: /\.js$/,