fix(config): modified config elements to create bundles correctly

openplayerjs · May 17, 2018 · 81941cb · 81941cb
1 parent 003abc7
commit 81941cb
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,5 @@
 node_modules/
-dist/
 .vscode/
 ts-dist/
 .idea/
-coverage/
-docs/
+coverage/
diff --git a/README.md b/README.md
@@ -24,13 +24,14 @@ Inspired by [MediaElementJS](http://mediaelementjs.com) and [Plyr](https://plyr.
 
 ### Obtain the files
 
-Currently, no `dist` folder or CDN reference is available. With the following steps, the `dist` folder and the bundles will be generated:
+The `dist` folder contains the files you will need yo use this awesome library. To obtain it, you can use one of the following methods:
 
+#### Direct download
+Download the repository from `https://github.com/rafa8626/openplayer.git`
+
+#### NPM
 ```
-git clone https://github.com/rafa8626/openplayer.git
-cd openplayer
-npm install
-npm run build
+npm install openplayer
 ```
 
 ### HTML
@@ -40,13 +41,23 @@ Include the OpenPlayer stylesheet inside the `<head>` tag, and the script at the
 #### Stylesheet
 
 ```html
-<link rel="stylesheet" href="/path/to/om_player.css">
+<link rel="stylesheet" href="/path/to/openplayer.css">
 ```
 
 #### Script
 
 ```html
-<script src="/path/to/om_player.js"></script>
+<script src="/path/to/openplayer.js"></script>
+```
+
+If you plan to use the library in a Node project:
+
+```javascript
+// Using as module
+var openplayer = require('/path/to/openplayer');
+
+// Importing library
+import OpenPlayer from 'openplayer';
 ```
 
 ### Minimal example

diff --git a/demo/index.html b/demo/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
     <link rel="icon" href="favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="../dist/om_player.css">
+    <link rel="stylesheet" href="../dist/openplayer.css">
     <style>
         body {
             max-width: 700px;
@@ -59,7 +59,7 @@ <h1>Audio Sample</h1>
         </div>
     </div>
 
-    <script src="../dist/om_player.js"></script>
+    <script src="../dist/openplayer.js"></script>
     <script>
         var sourcesSelector = document.querySelectorAll('select[name=sources]');
         var destroyBtn = document.querySelectorAll('button.destroy-player');

diff --git a/tsconfig.json b/tsconfig.json
@@ -10,11 +10,11 @@
     "declaration": false,
     "allowJs": true,
     "target": "es6",
-    "module": "es6",
+    "module": "commonjs",
     "noImplicitAny": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "removeComments": false,
+    "removeComments": true,
     "preserveConstEnums": true,
     "sourceMap": false,
     "skipLibCheck": true,

diff --git a/webpack.config.js b/webpack.config.js
@@ -6,13 +6,17 @@ const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
 module.exports = {
     context: __dirname,
     entry: {
-        'om_player.min.js': './src/js/player.ts',
-        'om_player.css': './src/css/player.css',
-        'om_player.min.css': './src/css/player.css',
+        'openplayer.min.js': './src/js/player.ts',
+        'openplayer.css': './src/css/player.css',
+        'openplayer.min.css': './src/css/player.css',
     },
     output: {
         path: path.resolve(__dirname, './dist'),
-        filename: '[name]'
+        filename: '[name]',
+        publicPath: '/dist/',
+        library: 'OpenPlayer',
+        libraryTarget: 'umd',
+        libraryExport: 'default'
     },
     module: {
         rules: [