mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Make moment optional from our UMD builds (#5978)
This commit is contained in:
parent
0697d0de90
commit
e07c5d0c6c
@ -11,13 +11,6 @@ Chart.js can be integrated with plain JavaScript or with different module loader
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Webpack
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import Chart from 'chart.js';
|
|
||||||
var myChart = new Chart(ctx, {...});
|
|
||||||
```
|
|
||||||
|
|
||||||
## Common JS
|
## Common JS
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -25,12 +18,69 @@ var Chart = require('chart.js');
|
|||||||
var myChart = new Chart(ctx, {...});
|
var myChart = new Chart(ctx, {...});
|
||||||
```
|
```
|
||||||
|
|
||||||
## Require JS
|
## Bundlers (Webpack, Rollup, etc.)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
require(['path/to/chartjs/dist/Chart.js'], function(Chart) {
|
import Chart from 'chart.js';
|
||||||
|
var myChart = new Chart(ctx, {...});
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** Moment.js is installed along Chart.js as dependency. If you don't want to use Momemt.js (either because you use a different date adapter or simply because don't need time functionalities), you will have to configure your bundler to exclude this dependency (e.g. using [`externals` for Webpack](https://webpack.js.org/configuration/externals/) or [`external` for Rollup](https://rollupjs.org/guide/en#peer-dependencies)).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Webpack
|
||||||
|
{
|
||||||
|
externals: {
|
||||||
|
moment: 'moment'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Rollup
|
||||||
|
{
|
||||||
|
external: {
|
||||||
|
['moment']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Require JS
|
||||||
|
|
||||||
|
**Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the UMD builds instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
|
||||||
var myChart = new Chart(ctx, {...});
|
var myChart = new Chart(ctx, {...});
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
> **Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
|
**Note:** starting v2.8, Moment.js is an optional dependency for `Chart.js` and `Chart.min.js`. In order to use the time scale with Moment.js, you need to make sure Moment.js is fully loaded **before** requiring Chart.js. You can either use a shim:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
require.config({
|
||||||
|
shim: {
|
||||||
|
'chartjs': {
|
||||||
|
deps: ['moment'] // enforce moment to be loaded before chartjs
|
||||||
|
}
|
||||||
|
},
|
||||||
|
paths: {
|
||||||
|
'chartjs': 'path/to/chartjs/dist/Chart.min.js',
|
||||||
|
'moment': 'path/to/moment'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
require(['chartjs'], function(Chart) {
|
||||||
|
new Chart(ctx, {...});
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
or simply use two nested `require()`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
require(['moment'], function() {
|
||||||
|
require(['chartjs'], function(Chart) {
|
||||||
|
new Chart(ctx, {...});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
```
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"jsdelivr": "dist/Chart.min.js",
|
"jsdelivr": "dist/Chart.min.js",
|
||||||
"unpkg": "dist/Chart.min.js",
|
"unpkg": "dist/Chart.min.js",
|
||||||
"main": "src/chart.js",
|
"main": "dist/Chart.js",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"canvas",
|
"canvas",
|
||||||
"charts",
|
"charts",
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
const commonjs = require('rollup-plugin-commonjs');
|
const commonjs = require('rollup-plugin-commonjs');
|
||||||
const resolve = require('rollup-plugin-node-resolve');
|
const resolve = require('rollup-plugin-node-resolve');
|
||||||
const terser = require('rollup-plugin-terser').terser;
|
const terser = require('rollup-plugin-terser').terser;
|
||||||
|
const optional = require('./rollup.plugins').optional;
|
||||||
const pkg = require('./package.json');
|
const pkg = require('./package.json');
|
||||||
|
|
||||||
const input = 'src/chart.js';
|
const input = 'src/chart.js';
|
||||||
@ -21,7 +22,10 @@ module.exports = [
|
|||||||
input: input,
|
input: input,
|
||||||
plugins: [
|
plugins: [
|
||||||
resolve(),
|
resolve(),
|
||||||
commonjs()
|
commonjs(),
|
||||||
|
optional({
|
||||||
|
include: ['moment']
|
||||||
|
})
|
||||||
],
|
],
|
||||||
output: {
|
output: {
|
||||||
name: 'Chart',
|
name: 'Chart',
|
||||||
@ -42,6 +46,9 @@ module.exports = [
|
|||||||
plugins: [
|
plugins: [
|
||||||
resolve(),
|
resolve(),
|
||||||
commonjs(),
|
commonjs(),
|
||||||
|
optional({
|
||||||
|
include: ['moment']
|
||||||
|
}),
|
||||||
terser({
|
terser({
|
||||||
output: {
|
output: {
|
||||||
preamble: banner
|
preamble: banner
|
||||||
|
61
rollup.plugins.js
Normal file
61
rollup.plugins.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
/* eslint-env es6 */
|
||||||
|
|
||||||
|
const UMD_WRAPPER_RE = /(\(function \(global, factory\) \{)((?:\s.*?)*)(\}\(this,)/;
|
||||||
|
const CJS_FACTORY_RE = /(module.exports = )(factory\(.*?\))( :)/;
|
||||||
|
const AMD_FACTORY_RE = /(define\()(.*?, factory)(\) :)/;
|
||||||
|
|
||||||
|
function optional(config = {}) {
|
||||||
|
return {
|
||||||
|
name: 'optional',
|
||||||
|
renderChunk(code, chunk, options) {
|
||||||
|
if (options.format !== 'umd') {
|
||||||
|
this.error('only UMD format is currently supported');
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapper = UMD_WRAPPER_RE.exec(code);
|
||||||
|
const include = config.include;
|
||||||
|
if (!wrapper) {
|
||||||
|
this.error('failed to parse the UMD wrapper');
|
||||||
|
}
|
||||||
|
|
||||||
|
let content = wrapper[2];
|
||||||
|
let factory = (CJS_FACTORY_RE.exec(content) || [])[2];
|
||||||
|
let updated = false;
|
||||||
|
|
||||||
|
for (let lib of chunk.imports) {
|
||||||
|
if (!include || include.indexOf(lib) !== -1) {
|
||||||
|
const regex = new RegExp(`require\\('${lib}'\\)`);
|
||||||
|
if (!regex.test(factory)) {
|
||||||
|
this.error(`failed to parse the CJS require for ${lib}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// We need to write inline try / catch with explicit require
|
||||||
|
// in order to enable statical extraction of dependencies:
|
||||||
|
// try { return require('moment'); } catch(e) {}
|
||||||
|
const loader = `function() { try { return require('${lib}'); } catch(e) { } }()`;
|
||||||
|
factory = factory.replace(regex, loader);
|
||||||
|
updated = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!updated) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Replace the CJS factory by our updated one.
|
||||||
|
content = content.replace(CJS_FACTORY_RE, `$1${factory}$3`);
|
||||||
|
|
||||||
|
// Replace the AMD factory by our updated one: we need to use the
|
||||||
|
// following AMD form in order to be able to try/catch require:
|
||||||
|
// define(['require'], function(require) { ... require(...); ... })
|
||||||
|
// https://github.com/amdjs/amdjs-api/wiki/AMD#using-require-and-exports
|
||||||
|
content = content.replace(AMD_FACTORY_RE, `$1['require'], function(require) { return ${factory}; }$3`);
|
||||||
|
|
||||||
|
return code.replace(UMD_WRAPPER_RE, `$1${content}$3`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
optional
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user