From 54b0d02cebb94a3fbc50506ff33513fe3ba2ada9 Mon Sep 17 00:00:00 2001 From: Darren Fang <2055563+darrenfang@users.noreply.github.com> Date: Sat, 17 Aug 2019 11:07:51 +0800 Subject: [PATCH] upgrade to webpack 4 --- .babelrc | 7 +- .circleci/config.yml | 2 +- .editorconfig | 16 ++++ .eslintrc | 61 +++++++++--- .npmignore | 5 +- README.md | 2 +- index.html | 13 --- package.json | 66 ++++++------- src/components/DatetimePicker.vue | 150 +++++++++++++++--------------- src/components/index.js | 7 -- src/index.html | 37 ++++++++ src/index.js | 32 +++++++ src/main.js | 2 +- webpack/build.js | 1 - webpack/dev.js | 1 - webpack/doc.js | 1 - webpack/webpack.base.config.js | 26 ++++-- webpack/webpack.build.config.js | 31 +++--- webpack/webpack.dev.config.js | 25 ++--- webpack/webpack.doc.config.js | 70 -------------- 20 files changed, 286 insertions(+), 269 deletions(-) create mode 100644 .editorconfig delete mode 100644 index.html delete mode 100644 src/components/index.js create mode 100644 src/index.html create mode 100644 src/index.js delete mode 100644 webpack/build.js delete mode 100644 webpack/dev.js delete mode 100644 webpack/doc.js delete mode 100644 webpack/webpack.doc.config.js diff --git a/.babelrc b/.babelrc index 000d063..67fc288 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,7 @@ { "presets": [ - ["es2015", { "modules": false }], - "stage-2" + [ + "@babel/preset-env" + ] ] -} \ No newline at end of file +} diff --git a/.circleci/config.yml b/.circleci/config.yml index 0dee13c..0e679ab 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,7 +2,7 @@ version: 2 defaults: &defaults working_directory: ~/workspace docker: - - image: circleci/node:7.10 + - image: circleci/node:10.16.3 jobs: build: diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7e3649a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/.eslintrc b/.eslintrc index 50d9764..95b0825 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,16 +1,49 @@ { - "parserOptions": { - "ecmaVersion": 2017, - "sourceType": "module" - }, - "extends": "standard", - "env": { - "browser": true - }, - "plugins": [ - "vue" - ], - "settings": { - "import/extensions": [".js", ".vue", ".less"] - } + "env": { + "browser": true, + "es6": true, + "node": true + }, + "extends": [ + "plugin:vue/essential", + "standard" + ], + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + }, + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module" + }, + "plugins": [ + "vue" + ], + "rules": { + "quotes": [ + "error", + "single" + ], + "indent": [ + "error", + 2 + ], + "vue/script-indent": [ + "error", + 2, + { + "baseIndent": 1 + } + ] + }, + "overrides": [ + { + "files": [ + "*.vue" + ], + "rules": { + "indent": "off" + } + } + ] } diff --git a/.npmignore b/.npmignore index b56dc10..16620a2 100644 --- a/.npmignore +++ b/.npmignore @@ -1,9 +1,8 @@ /docs /node_modules /webpack -.babelrc +.editorconfig .eslintignore .eslintrc -index.html .npmignore -*.tgz \ No newline at end of file +*.tgz diff --git a/README.md b/README.md index 9ee5f09..c04a896 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Once installed, it can be used in a template as simply as: | datetime (model) | Date/String | | Time picker model. | | disabled | Boolean | false | Input is disabled. | | label | string | | Sets input label. | -| width | Number | 320 | The width of the content. | +| width | Number | 340 | The width of the content. | | format | string | YYYY-MM-DD HH:mm:ss | Defines the format of a datetime displayed in field. | | timePickerFormat | string | 24hr | Defines the format of a time displayed in picker. Available options are ampm and 24hr. | | locale | string | en-us | Sets the locale. Accepts a string with a BCP 47 language tag. | diff --git a/index.html b/index.html deleted file mode 100644 index 02c4dc0..0000000 --- a/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - vuetify-datetime-picker - - - - - -
- - diff --git a/package.json b/package.json index fc5869d..e93d1e5 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,11 @@ { "name": "vuetify-datetime-picker", - "version": "1.0.13", + "version": "1.1.0", "description": "DatetimePicker component for Vuetify.js.", "main": "dist/index.js", "scripts": { - "dev": "node_modules/.bin/webpack-dev-server --config webpack/dev.js", - "doc": "node_modules/.bin/webpack -p --config webpack/doc.js --progress --profile --colors", - "build": "node_modules/.bin/webpack -p --config webpack/build.js --progress --profile --colors", + "dev": "webpack-dev-server --config webpack/webpack.dev.config.js", + "build": "webpack --config webpack/webpack.build.config.js --progress --profile --colors", "deploy": "npm run build && npm publish --registry https://registry.npmjs.org/" }, "author": "Darren Fang ", @@ -16,40 +15,37 @@ "url": "git+https://github.com/darrenfang/vuetify-datetime-picker" }, "devDependencies": { - "@fortawesome/fontawesome-free": "^5.6.3", - "babel-core": "^6.24.1", - "babel-loader": "^7.0.0", - "babel-preset-es2015": "^6.24.1", - "babel-preset-stage-2": "^6.24.1", - "clean-webpack-plugin": "^0.1.16", - "css-loader": "^0.28.1", - "eslint": "^3.19.0", - "eslint-config-standard": "^10.2.1", - "eslint-config-vue": "^2.0.2", - "eslint-loader": "^1.7.1", - "eslint-plugin-import": "^2.2.0", - "eslint-plugin-node": "^4.2.2", - "eslint-plugin-promise": "^3.5.0", - "eslint-plugin-standard": "^3.0.1", - "eslint-plugin-vue": "^2.0.1", - "extract-text-webpack-plugin": "^2.1.0", - "file-loader": "^0.11.1", - "html-webpack-plugin": "^2.28.0", - "less": "^2.7.2", - "less-loader": "^4.0.3", + "@babel/core": "^7.5.5", + "@babel/preset-env": "^7.5.5", + "@fortawesome/fontawesome-free": "^5.10.1", + "babel-loader": "^8.0.6", + "clean-webpack-plugin": "^3.0.0", + "css-loader": "^3.2.0", + "eslint": "^6.1.0", + "eslint-config-standard": "^13.0.1", + "eslint-loader": "^2.2.1", + "eslint-plugin-import": "^2.18.2", + "eslint-plugin-node": "^9.1.0", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-standard": "^4.0.0", + "eslint-plugin-vue": "^5.2.3", + "file-loader": "^4.2.0", + "html-webpack-plugin": "^3.2.0", + "less-loader": "^5.0.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", - "url-loader": "^0.5.8", - "vue-loader": "^12.0.2", - "vue-style-loader": "^4.1.0", - "vue-template-compiler": "^2.3.0", - "webpack": "^2.4.1", - "webpack-dev-server": "^2.4.5", - "webpack-merge": "^4.1.0" + "url-loader": "^2.1.0", + "vue-loader": "^15.7.1", + "vue-style-loader": "^4.1.2", + "vue-template-compiler": "^2.6.10", + "webpack": "^4.39.2", + "webpack-cli": "^3.3.6", + "webpack-dev-server": "^3.8.0", + "webpack-merge": "^4.2.1" }, "dependencies": { - "moment": "^2.22.2", - "vue": "^2.3.0", - "vuetify": "^1.1.4" + "moment": "^2.24.0", + "vue": "^2.6.10", + "vuetify": "^1.5.17" } } diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue index 2ab30c1..6d79387 100644 --- a/src/components/DatetimePicker.vue +++ b/src/components/DatetimePicker.vue @@ -1,71 +1,71 @@ + +
+ + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..576045d --- /dev/null +++ b/src/index.js @@ -0,0 +1,32 @@ +/* + * MIT License + * + * Copyright (c) 2018 Darren Fang + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + +import DatetimePicker from './components/DatetimePicker' + +const install = (Vue) => { + Vue.component('v-datetime-picker', DatetimePicker) +} + +export default install diff --git a/src/main.js b/src/main.js index 7bba7ef..fbe08e3 100644 --- a/src/main.js +++ b/src/main.js @@ -3,7 +3,7 @@ import './stylus/main.styl' import Vue from 'vue' import Vuetify from 'vuetify' import App from './app' -import DatetimePicker from '~components/index' +import DatetimePicker from './index' Vue.use(Vuetify) Vue.use(DatetimePicker) diff --git a/webpack/build.js b/webpack/build.js deleted file mode 100644 index 53f6034..0000000 --- a/webpack/build.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./webpack.build.config.js') diff --git a/webpack/dev.js b/webpack/dev.js deleted file mode 100644 index 4ce3dac..0000000 --- a/webpack/dev.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./webpack.dev.config.js') diff --git a/webpack/doc.js b/webpack/doc.js deleted file mode 100644 index 2d04427..0000000 --- a/webpack/doc.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./webpack.doc.config.js') diff --git a/webpack/webpack.base.config.js b/webpack/webpack.base.config.js index 8c7bf0e..08896fa 100644 --- a/webpack/webpack.base.config.js +++ b/webpack/webpack.base.config.js @@ -1,11 +1,10 @@ const {join} = require('path') +const {CleanWebpackPlugin} = require('clean-webpack-plugin') +const VueLoaderPlugin = require('vue-loader/lib/plugin') const resolve = dir => join(__dirname, '..', dir) module.exports = { - externals: { - moment: 'moment' - }, output: { filename: 'bundle.js', path: resolve('dist'), @@ -26,12 +25,17 @@ module.exports = { loader: 'vue-style-loader!css-loader!less-loader' }, { + enforce: "pre", test: /\.js$/, exclude: /node_modules/, - use: [ - 'babel-loader', - 'eslint-loader' - ] + loader: "eslint-loader" + }, + { + test: /\.js$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader' + } }, { enforce: 'pre', @@ -39,6 +43,10 @@ module.exports = { loader: 'eslint-loader', exclude: /node_modules/ }, + { + test: /\.vue$/, + loader: 'vue-loader' + }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader', @@ -56,6 +64,10 @@ module.exports = { } ] }, + plugins: [ + new CleanWebpackPlugin(), + new VueLoaderPlugin() + ], resolve: { extensions: ['.js', '.vue', '.json', '.css', '.less', '.styl'], modules: [resolve('src'), 'node_modules'], diff --git a/webpack/webpack.build.config.js b/webpack/webpack.build.config.js index 917a5b7..bbc4b4c 100644 --- a/webpack/webpack.build.config.js +++ b/webpack/webpack.build.config.js @@ -1,32 +1,25 @@ -const { join } = require('path') +const {join} = require('path') const merge = require('webpack-merge') const basicConfig = require('./webpack.base.config') -const CleanWebpackPlugin = require('clean-webpack-plugin') const resolve = dir => join(__dirname, '..', dir) module.exports = merge(basicConfig, { + mode: 'production', + devtool: 'source-map', entry: { - app: './src/components/index.js' + app: './src/index.js' }, - devtool: 'source-map', output: { path: resolve('dist'), filename: 'index.js', - library: 'vuetify-datetime-picker', - libraryTarget: 'umd' - }, - module: { - rules: [ - { - test: /\.vue$/, - loader: 'vue-loader' - } - ] + library: 'VuetifyDatetimePicker', + libraryTarget: 'umd', + umdNamedDefine: true, + globalObject: `(typeof self !== 'undefined' ? self : this)`, + libraryExport: 'default' }, - plugins: [ - new CleanWebpackPlugin(['dist'], { - root: resolve('./') - }) - ] + externals: { + moment: 'moment' + } }) diff --git a/webpack/webpack.dev.config.js b/webpack/webpack.dev.config.js index 313eafa..e447f1d 100644 --- a/webpack/webpack.dev.config.js +++ b/webpack/webpack.dev.config.js @@ -1,4 +1,4 @@ -const { join } = require('path') +const {join} = require('path') const webpack = require('webpack') const merge = require('webpack-merge') const basicConfig = require('./webpack.base.config') @@ -7,33 +7,24 @@ const HtmlWebpackPlugin = require('html-webpack-plugin') const resolve = dir => join(__dirname, '..', dir) module.exports = merge(basicConfig, { + mode: 'development', entry: { app: './src/main.js' }, - module: { - rules: [ - { - test: /\.vue$/, - loader: 'vue-loader' - } - ] - }, devtool: 'inline-source-map', devServer: { - contentBase: resolve('/'), - compress: true, + contentBase: resolve('dist'), + compress: false, hot: true, - inline: true, - publicPath: '/', - stats: 'minimal' + inline: true }, plugins: [ new webpack.HotModuleReplacementPlugin(), - new webpack.NamedModulesPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', - template: 'index.html', - inject: true + template: 'src/index.html', + inject: true, + title: 'vuetify-datetime-picker Demo' }) ] }) diff --git a/webpack/webpack.doc.config.js b/webpack/webpack.doc.config.js deleted file mode 100644 index be5a62d..0000000 --- a/webpack/webpack.doc.config.js +++ /dev/null @@ -1,70 +0,0 @@ -const { join } = require('path') -const webpack = require('webpack') -const merge = require('webpack-merge') -const basicConfig = require('./webpack.base.config') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const ExtractTextPlugin = require('extract-text-webpack-plugin') -const CleanWebpackPlugin = require('clean-webpack-plugin') - -const resolve = dir => join(__dirname, '..', dir) - -module.exports = merge(basicConfig, { - entry: { - 'js/app': './src/main.js', - 'js/vendor': [ - 'vue' - ] - }, - devtool: 'source-map', - output: { - path: resolve('docs'), - filename: '[name].[chunkhash:8].js', - chunkFilename: 'js/[name].[chunkhash:8].js' - }, - module: { - rules: [ - { - test: /\.vue$/, - loader: 'vue-loader', - options: { - loaders: { - css: ExtractTextPlugin.extract({ - use: ['css-loader'] - }), - less: ExtractTextPlugin.extract({ - use: ['css-loader', 'less-loader'] - }) - } - } - } - ] - }, - plugins: [ - new ExtractTextPlugin({ - filename: 'css/[name].[contenthash:8].css', - allChunks: true - }), - new webpack.optimize.CommonsChunkPlugin({ - names: ['js/vendor', 'js/manifest'] - }), - new HtmlWebpackPlugin({ - filename: 'index.html', - template: 'index.html', - inject: true, - minify: { - removeComments: true, - collapseWhitespace: true, - removeAttributeQuotes: true - }, - chunksSortMode: 'dependency' - }), - new webpack.LoaderOptionsPlugin({ - minimize: true, - debug: false - }), - new webpack.optimize.OccurrenceOrderPlugin(), - new CleanWebpackPlugin(['docs'], { - root: resolve('./') - }) - ] -})