Fixed build for global and npm usages

TimeToKnow · Apr 27, 2016 · 6a1815b · 6a1815b
1 parent 020d35e
commit 6a1815b
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 38 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -9,7 +9,8 @@
   "globals": {
     "__DEV__": false,
     "__PROD__": false,
-    "$": false
+    "$": false,
+    "EmojiPanel": false
   },
   "rules": {
 		"comma-dangle": [2, "never"],

diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
+lib/
 npm-debug.log
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,11 @@
+dist/
+example/
+.editorconfig
+.eslintignore
+.eslintrc
+.travis
+index.html
+webpack.config.js
+webpack.dev.config.js
+webpack.lib.config.js
+npm-debug.log
diff --git a/example/example.scss → example/example.css b/example/example.scss → example/example.css
@@ -17,10 +17,10 @@ html, body {
   text-align: center;
   color: #fff;
   font-family: 'Poiret One', cursive;
-  a {
-    text-decoration: none;
-    color: #fff;
-  }
+}
+.mail a {
+  text-decoration: none;
+  color: #fff;
 }
 .tagline {
   background-color: rgba(255, 255, 255, 0.2);
@@ -51,13 +51,11 @@ pre code {
   color: #fff;
 }
 /* Example 0 */
-#example-0 {
-  span {
-    padding-left: 5px;
-  }
-  div {
-    padding-top: 10px;
-  }
+#example-0 span {
+  padding-left: 5px;
+}
+#example-0 div {
+  padding-top: 10px;
 }
 
 /* Example 1 */
@@ -73,14 +71,14 @@ pre code {
 /* Example 3 */
 #example-3-container {
   position: relative;
-  &.open #example-3 {
-    visibility: visible;
-  }
+}
+#example-3-container.open #example-3 {
+  visibility: visible;
 }
 
 #example-3 {
   visibility: hidden;
-  border: 2px solid darken(#00BCD4, 20%);
+  border: 2px solid #00626e;
   bottom: 100%;
   position: absolute;
   height: 250px;

diff --git a/example/example.js b/example/example.js
@@ -1,5 +1,3 @@
-import EmojiPanel from 'emoji-panel';
-
 let size = '32';
 let imageSet = 'apple';
 const changeEmojiStylesheet = () => {

diff --git a/index.html b/index.html
@@ -3,8 +3,9 @@
   <head>
     <meta charset="utf-8">
     <title>emoji-panel</title>
-    <link rel="stylesheet" href="dist/example.min.css">
+    <script src="dist/emoji-panel.min.js"></script>
     <link rel="stylesheet" href="dist/emoji-panel-apple-32.min.css" id="emoji-style">
+    <link rel="stylesheet" href="dist/example.min.css">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>

diff --git a/package.json b/package.json
@@ -2,14 +2,15 @@
   "name": "emoji-panel",
   "version": "0.1.0",
   "description": "Add panel picker for emojis with different types of sets on your website. http://TimeToKnow.github.io/emoji-panel/",
-  "main": "dist/emoji-panel.js",
+  "main": "lib/emoji-panel.js",
   "scripts": {
     "test": "eslint .",
+    "lib": "webpack --progress --config ./webpack.lib.config.js && rimraf ./lib/emoji-panel-*.js",
     "build": "webpack --progress && rimraf ./dist/emoji-panel-*.js",
     "start": "webpack-dev-server --port 8080 --inline --progress --colors --config ./webpack.dev.config.js",
     "start:prod": "set NODE_ENV=production&& npm start",
-    "predeploy": "set NODE_ENV=development&& npm run build && set NODE_ENV=production&& npm run build",
-    "deploy": "npm run predeploy && git add dist && git add dist/* && git commit -m \"Autogenerated commit for compiled files\" && npm version ${BUMP:-\"patch\"} && git checkout gh-pages && git merge master && git checkout master && git push --tags && npm publish && git push origin master gh-pages"
+    "predeploy": "set NODE_ENV=development&& npm run build && npm run lib && set NODE_ENV=production&& npm run build",
+    "deploy": "npm run predeploy && git add  -f dist && git add -f dist/* && git commit -m \"Autogenerated commit for dist files\" && npm version ${BUMP:-\"patch\"} && git checkout gh-pages && git merge master && git checkout master && git push --tags && npm publish && git push origin master gh-pages"
   },
   "repository": {
     "type": "git",
@@ -27,14 +28,16 @@
   ],
   "author": "unimonkiez",
   "license": "ISC",
+  "peerDependencies": {
+    "emoji-data": "git+https://github.com/iamcal/emoji-data.git#v2.4.1"
+  },
   "devDependencies": {
     "absurd": "^0.3.6",
     "absurd-loader": "0.0.2",
     "babel-eslint": "^6.0.2",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "css-loader": "^0.23.1",
-    "emoji-data": "git+https://github.com/iamcal/emoji-data.git",
     "eslint": "^2.7.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",

diff --git a/src/emoji-panel.js b/src/emoji-panel.js
@@ -1,7 +1,7 @@
 import { IMAGE_SET, SIZE } from './constant';
 import createPanel from './create-panel';
 
-export default class EmojiPanel {
+module.exports = class EmojiPanel {
   constructor(el, { animationDuration = 300, onClick } = {}) {
     if (__DEV__) {
       if (!(el && el.nodeType)) {
@@ -27,4 +27,4 @@ export default class EmojiPanel {
     el.innerHTML = '';
     el.appendChild(windowImageSet);
   }
-}
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -27,12 +27,10 @@ const walk = dir => {
 module.exports = {
   devtool: false,
   entry: Object.assign({
-    'emoji-panel': [
-      './src/emoji-panel.js'
-    ],
-    example: [
+    'emoji-panel': ['./src/emoji-panel.js'],
+    'example': [
       './example/example.js',
-      './example/example.scss'
+      './example/example.css'
     ]
   },
   walk(path.join(__dirname, 'src', 'sets'))
@@ -45,7 +43,8 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
     filename: `[name]${__PROD__ ? '.min' : ''}.js`,
-    publicPath: ''
+    publicPath: '',
+    library: 'EmojiPanel'
   },
   plugins: [
     new ExtractTextPlugin(`[name]${__PROD__ ? '.min' : ''}.css`),

diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -11,14 +11,10 @@ const __PROD__ = process.env.NODE_ENV === 'production';
 module.exports =
 Object.assign(webpackBaseConfig, {
   devtool: 'source-map',
-  entry: Object.assign({
-    base: [] // Hot reload will be injected here
-  },
-  Object.keys(webpackBaseConfig.entry)
-  .filter(entryName => entryName !== 'emoji-panel')
+  entry: Object.keys(webpackBaseConfig.entry)
   .reduce((obj, entryName) => Object.assign(obj, {
     [`dist/${entryName}${__PROD__ ? '' : '.min'}`]: webpackBaseConfig.entry[entryName]
-  }), {})),
+  }), {}),
   module: Object.assign(webpackBaseConfig.module, {
     loaders: webpackBaseConfig.module.loaders.map(loaderObj => {
       const loaderTestString = loaderObj.test.toString();
@@ -33,7 +29,7 @@ Object.assign(webpackBaseConfig, {
   }),
   plugins: webpackBaseConfig.plugins.concat([
     new HtmlWebpackPlugin({
-      chunks: ['base'],  // Others are added manually to `index.html`
+      chunks: [],  // All are added manually to `index.html`
       template: './index.html',
       inject: 'head'
     })

diff --git a/webpack.lib.config.js b/webpack.lib.config.js
@@ -0,0 +1,27 @@
+'use strict';
+const path = require('path');
+const webpackBaseConfig = require('./webpack.config');
+
+// Plugins
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports =
+Object.assign(webpackBaseConfig, {
+  output: Object.assign(webpackBaseConfig.output, {
+    path: path.join(__dirname, 'lib'),
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  }),
+  module: Object.assign(webpackBaseConfig.module, {
+    loaders: webpackBaseConfig.module.loaders.map(loaderObj => {
+      const loaderTestString = loaderObj.test.toString();
+      if (loaderTestString === /\.(png|ttf)$/.toString()) {
+        return Object.assign(loaderObj, {
+          loader: 'file?name=../[path][name].[ext]' // So it won't copy the file to lib folder, only point to it's own location
+        });
+      } else {
+        return loaderObj;
+      }
+    })
+  })
+});