mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Merge pull request #246 from apertureless/feature/dependency_and_build_fix
Feature/dependency and build fix
This commit is contained in:
13
.babelrc
13
.babelrc
@@ -1,5 +1,14 @@
|
|||||||
{
|
{
|
||||||
"presets": ["es2015", "stage-2"],
|
"presets": [
|
||||||
"plugins": ["transform-runtime"],
|
["@babel/preset-env", {
|
||||||
|
"modules": false,
|
||||||
|
"targets": {
|
||||||
|
"browsers": [
|
||||||
|
"last 2 versions"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
"@babel/stage-2"
|
||||||
|
],
|
||||||
"comments": false
|
"comments": false
|
||||||
}
|
}
|
||||||
|
|||||||
19
README.md
19
README.md
@@ -38,27 +38,14 @@ Simply run `yarn add vue-chartjs chart.js`
|
|||||||
Or if you want to use it directly in the browser add
|
Or if you want to use it directly in the browser add
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.full.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
|
||||||
```
|
```
|
||||||
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/zEvvWM)
|
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/zEvvWM)
|
||||||
|
|
||||||
## Explanation of Different Builds
|
|
||||||
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
|
|
||||||
|
|
||||||
- Browser
|
|
||||||
- Browserify / Webpack 1
|
|
||||||
- Webpack 2
|
|
||||||
|
|
||||||
| Build | Chart.js |
|
|
||||||
|---|---|
|
|
||||||
| vue-chartjs.full.js | Bundled |
|
|
||||||
| vue-chartjs.full.min.js | Bundled |
|
|
||||||
| vue-chartjs.js | peerDependency |
|
|
||||||
| vue-chartjs.min.js | peerDependency |
|
|
||||||
| es/index* | peerDependency |
|
|
||||||
|
|
||||||
### Browser
|
### Browser
|
||||||
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/zEvvWM). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
|
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/zEvvWM). For this case, please use the `vue-chartjs.min.js` which is the minified version. You also need to add the Chart.js CDN script.
|
||||||
|
|
||||||
You can then simply register your component:
|
You can then simply register your component:
|
||||||
|
|
||||||
|
|||||||
@@ -1,92 +0,0 @@
|
|||||||
// var vue = require('vue-loader')
|
|
||||||
var path = require('path')
|
|
||||||
var webpack = require('webpack')
|
|
||||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
|
||||||
var projectRoot = path.resolve(__dirname, '../')
|
|
||||||
var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
|
|
||||||
const npmCfg = require('../package.json')
|
|
||||||
const vueLoaderConfig = require('./vue-loader.conf')
|
|
||||||
|
|
||||||
var banner = [
|
|
||||||
npmCfg.name + ' v' + npmCfg.version,
|
|
||||||
'(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
|
|
||||||
npmCfg.homepage
|
|
||||||
].join('\n')
|
|
||||||
|
|
||||||
function resolve (dir) {
|
|
||||||
return path.join(__dirname, '..', dir)
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
entry: {
|
|
||||||
'vue-chartjs': './src/index.js'
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
filename: './dist/[name].full.js',
|
|
||||||
library: 'VueChartJs',
|
|
||||||
libraryTarget: 'umd',
|
|
||||||
umdNamedDefine: true
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.js', '.vue', '.json'],
|
|
||||||
alias: {
|
|
||||||
'vue$': 'vue/dist/vue.esm.js',
|
|
||||||
'@': resolve('src')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.(js|vue)$/,
|
|
||||||
loader: 'eslint-loader',
|
|
||||||
enforce: 'pre',
|
|
||||||
include: [resolve('src'), resolve('test')],
|
|
||||||
options: {
|
|
||||||
formatter: require('eslint-friendly-formatter')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.vue$/,
|
|
||||||
loader: 'vue-loader',
|
|
||||||
options: vueLoaderConfig
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
include: [resolve('src'), resolve('test')]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
loader: cssLoader
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.s[a|c]ss$/,
|
|
||||||
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.json$/,
|
|
||||||
loader: 'json-loader'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new webpack.BannerPlugin(banner)
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV === 'production') {
|
|
||||||
|
|
||||||
delete module.exports.devtool
|
|
||||||
module.exports.plugins = [
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env': {
|
|
||||||
NODE_ENV: '"production"'
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
|
||||||
compress: {
|
|
||||||
warnings: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]
|
|
||||||
}
|
|
||||||
17
build/webpack.release.full.min.js
vendored
17
build/webpack.release.full.min.js
vendored
@@ -1,17 +0,0 @@
|
|||||||
var config = require('./webpack.release.full.js')
|
|
||||||
var webpack = require('webpack')
|
|
||||||
|
|
||||||
config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
|
|
||||||
|
|
||||||
delete config.devtool
|
|
||||||
|
|
||||||
config.plugins = [
|
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
|
||||||
sourceMap: false,
|
|
||||||
compress: {
|
|
||||||
warnings: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]
|
|
||||||
|
|
||||||
module.exports = config
|
|
||||||
@@ -26,7 +26,12 @@ module.exports = {
|
|||||||
umdNamedDefine: true
|
umdNamedDefine: true
|
||||||
},
|
},
|
||||||
externals: {
|
externals: {
|
||||||
'chart.js': 'chart.js'
|
'chart.js': {
|
||||||
|
root: 'Chart',
|
||||||
|
commonjs: 'chart.js',
|
||||||
|
commonjs2: 'chart.js',
|
||||||
|
amd: 'chart.js'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.vue', '.json'],
|
extensions: ['.js', '.vue', '.json'],
|
||||||
@@ -71,7 +76,8 @@ module.exports = {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.BannerPlugin(banner)
|
new webpack.BannerPlugin(banner),
|
||||||
|
new webpack.optimize.ModuleConcatenationPlugin()
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
1
build/webpack.release.min.js
vendored
1
build/webpack.release.min.js
vendored
@@ -6,6 +6,7 @@ config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
|
|||||||
delete config.devtool
|
delete config.devtool
|
||||||
|
|
||||||
config.plugins = [
|
config.plugins = [
|
||||||
|
new webpack.optimize.ModuleConcatenationPlugin(),
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
sourceMap: false,
|
sourceMap: false,
|
||||||
compress: {
|
compress: {
|
||||||
|
|||||||
34137
dist/vue-chartjs.full.js
vendored
34137
dist/vue-chartjs.full.js
vendored
File diff suppressed because it is too large
Load Diff
1
dist/vue-chartjs.full.min.js
vendored
1
dist/vue-chartjs.full.min.js
vendored
File diff suppressed because one or more lines are too long
29
package.json
29
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-chartjs",
|
"name": "vue-chartjs",
|
||||||
"version": "3.0.0",
|
"version": "3.0.1-rc2",
|
||||||
"description": "Vue.js wrapper for chart.js for creating beautiful charts.",
|
"description": "Vue.js wrapper for chart.js for creating beautiful charts.",
|
||||||
"author": "Jakub Juszczak <jakub@posteo.de>",
|
"author": "Jakub Juszczak <jakub@posteo.de>",
|
||||||
"homepage": "http://vue-chartjs.org",
|
"homepage": "http://vue-chartjs.org",
|
||||||
@@ -53,26 +53,21 @@
|
|||||||
"e2e": "node test/e2e/runner.js",
|
"e2e": "node test/e2e/runner.js",
|
||||||
"test": "npm run unit",
|
"test": "npm run unit",
|
||||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
|
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
|
||||||
"release": "webpack --progress --hide-modules --config ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js && webpack --progress --hide-modules --config ./build/webpack.release.full.js && NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.full.min.js",
|
"release": "webpack --progress --hide-modules --config ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js",
|
||||||
"prepublish": "yarn run lint && yarn run test && yarn run build"
|
"prepublishOnly": "yarn run lint && yarn run test && yarn run build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"isparta": "^4.0.0",
|
|
||||||
"lodash.merge": "^4.6.0"
|
"lodash.merge": "^4.6.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"chart.js": "2.7.0",
|
"chart.js": "2.7.x"
|
||||||
"vue": "2.5.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-cli": "^6.24.1",
|
"@babel/cli": "^7.0.0-beta.31",
|
||||||
"babel-core": "^6.25.0",
|
"@babel/core": "^7.0.0-beta.31",
|
||||||
"babel-loader": "7.1.2",
|
"@babel/preset-env": "^7.0.0-beta.31",
|
||||||
"babel-plugin-transform-object-assign": "^6.22.0",
|
"@babel/preset-stage-2": "^7.0.0-beta.31",
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"babel-loader": "8.0.0-beta.0",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
|
||||||
"babel-preset-stage-2": "^6.24.1",
|
|
||||||
"babel-runtime": "^6.23.0",
|
|
||||||
"chai": "^3.5.0",
|
"chai": "^3.5.0",
|
||||||
"chart.js": "2.7.0",
|
"chart.js": "2.7.0",
|
||||||
"chromedriver": "^2.28.0",
|
"chromedriver": "^2.28.0",
|
||||||
@@ -98,6 +93,7 @@
|
|||||||
"html-webpack-plugin": "^2.28.0",
|
"html-webpack-plugin": "^2.28.0",
|
||||||
"http-proxy-middleware": "^0.17.4",
|
"http-proxy-middleware": "^0.17.4",
|
||||||
"inject-loader": "^3.0.0",
|
"inject-loader": "^3.0.0",
|
||||||
|
"isparta": "^4.0.0",
|
||||||
"jasmine-core": "^2.5.2",
|
"jasmine-core": "^2.5.2",
|
||||||
"json-loader": "^0.5.4",
|
"json-loader": "^0.5.4",
|
||||||
"karma": "^1.5.0",
|
"karma": "^1.5.0",
|
||||||
@@ -137,11 +133,6 @@
|
|||||||
"node": ">=6.9.0",
|
"node": ">=6.9.0",
|
||||||
"npm": ">= 3.0.0"
|
"npm": ">= 3.0.0"
|
||||||
},
|
},
|
||||||
"babel": {
|
|
||||||
"presets": [
|
|
||||||
"es2015"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"browserify": {
|
"browserify": {
|
||||||
"transform": [
|
"transform": [
|
||||||
"babelify"
|
"babelify"
|
||||||
|
|||||||
Reference in New Issue
Block a user