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