init build setting

lpreterite · Apr 26, 2017 · f8af3c8 · f8af3c8
1 parent 1f4d76e
commit f8af3c8
Show file tree

Hide file tree

Showing 12 changed files with 205 additions and 38 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["latest", {
+      "es2015": { "modules": false }
+    }]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,37 +1,5 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
diff --git a/README.md b/README.md
@@ -1,2 +1,18 @@
 # vue-sina-emotion
-新浪表情面板的vue组件
+
+> 新浪表情面板的vue组件
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/build/base.js b/build/base.js
@@ -0,0 +1,39 @@
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        library: 'VueSinaEmotion',
+        libraryTarget: "umd",
+        path: path.resolve(__dirname, '../dist'),
+        publicPath: '/dist/',
+        filename: 'vue-sina-emotion.js'
+    },
+    module: {
+        rules: [{
+            test: /\.vue$/,
+            loader: 'vue-loader',
+            options: {
+                loaders: {
+                    'css': 'vue-style-loader!css-loader',
+                    'scss': 'vue-style-loader!css-loader!sass-loader'
+                }
+            }
+        }, {
+            test: /\.js$/,
+            loader: 'babel-loader',
+            exclude: /node_modules/
+        }]
+    },
+    resolve: {
+        alias: {
+          'vue$': 'vue/dist/vue.esm.js'
+        },
+        extensions: ['.vue','.js']
+    },
+    performance: {
+        hints: false
+    },
+    devtool: '#eval-source-map'
+}
diff --git a/build/index.js b/build/index.js
@@ -0,0 +1,41 @@
+const path = require('path');
+const webpack = require('webpack');
+var options = require('./base.js');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+options.module.rules.pop();
+options.module.rules.unshift([{
+    test: /\.vue$/,
+    loader: 'vue-loader',
+    options: {
+        loaders: {
+            'css': ExtractTextPlugin.extract({
+                use: 'css-loader',
+                fallback: 'vue-style-loader'
+            }),
+            'scss': ExtractTextPlugin.extract({
+                use: 'css-loader!sass-loader',
+                fallback: 'vue-style-loader'
+            })
+        }
+    }
+}])
+options.devtool = '#source-map';
+options.plugins = [
+    new ExtractTextPlugin('vue-sina-emotion.css'),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+];
+module.exports = options;
diff --git a/build/serve.js b/build/serve.js
@@ -0,0 +1,18 @@
+const path = require('path');
+const webpack = require('webpack');
+var options = require('./base.js');
+
+options.devtool = '#source-map';
+options.output = {
+    library: 'VueSinaEmotion',
+    libraryTarget: "umd",
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    filename: 'vue-sina-emotion.js'
+};
+options.devServer = {
+    historyApiFallback: true,
+    noInfo: true,
+    contentBase: [path.join(__dirname, '../example'), path.join(__dirname, "../node_modules")]
+};
+module.exports = options;
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-sina-emotion</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/vue/dist/vue.js"></script>
+    <script src="/dist/vue-sina-emotion.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/example/main.js b/example/main.js
@@ -0,0 +1 @@
+console.log('example');
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-sina-emotion</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/node_modules/vue/dist/vue.js"></script>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "vue-sina-emotion",
+  "description": "新浪表情面板的vue组件",
+  "version": "1.0.0",
+  "author": "packy <[email protected]>",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/serve --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --config ./build/ --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^2.2.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-preset-latest": "^6.0.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.9.0",
+    "node-sass": "^4.5.0",
+    "sass-loader": "^5.0.1",
+    "vue-loader": "^11.3.4",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,2 @@
+import VueSinaEmotion from './vue-sina-emotion';
+export default VueSinaEmotion;
diff --git a/src/vue-sina-emotion.vue b/src/vue-sina-emotion.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="panel">
+        <h1 class="title">haha</h1>
+        <p>2333</p>
+    </div>
+</template>
+<style lang="scss">
+    .panel{
+        .title{
+            font-size: 16px;
+        }
+    }
+</style>
+<script>
+export default {
+    name: 'VueSinaEmotion',
+    data(){
+        return 'fuckyou';
+    }
+}
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import VueSinaEmotion from './vue-sina-emotion';
		export default VueSinaEmotion;