Skip to content

Simplify rollup configuration in documentation #354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 23, 2017
Merged

Simplify rollup configuration in documentation #354

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aa592ff
Simplify rollup configuration in documentation
kvet Jan 23, 2017
3b02d68
Add info about CSS bundling
kvet Jan 23, 2017
cf3e96e
Fix typo
kvet Jan 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 42 additions & 12 deletions docs/using-rollup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,59 @@ Follow the [installation](https://github.com/DevExpress/devextreme-angular#insta

## <a name="configuration"></a>Configure Rollup for DevExtreme ##

There is [a limitation](https://github.com/DevExpress/devextreme-angular/issues/283) in bundling with Rollup.
There is [a limitation](https://github.com/DevExpress/devextreme-angular/issues/353) in bundling with Rollup.
Make sure that you use [long paths](https://github.com/DevExpress/devextreme-angular/#bundlers-without-tree-shaking-support) for DevExtreme Angular modules.

Ensure that the following plugins are included:

```js
var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');
var builtins = require('rollup-plugin-node-builtins');
var globals = require('rollup-plugin-node-globals');
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import alias from 'rollup-plugin-alias';

{
....
...

export default {
...
plugins: [
nodeResolve({ jsnext: true, main: true, browser: true, preferBuiltins: true }),
commonjs(),
builtins(),
globals()
alias({
jszip: path.join(__dirname, './node_modules/jszip/dist/jszip.min.js')
}),
nodeResolve({ jsnext: true, module: true }),
commonjs()
]
...
}
```

## Import DevExtreme Stylesheets ##

Import the required [DevExtreme css files](https://js.devexpress.com/Documentation/Guide/Themes/Predefined_Themes/).
Import the required [DevExtreme css files](https://js.devexpress.com/Documentation/Guide/Themes/Predefined_Themes/).


In order to create a single CSS bundle, you can use the `rollup-plugin-css-only` package. Import DevExtreme CSS files prior to widget modules as follows:

```js
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

...
```

Ensure that the following plugin is included:

```js
import css from 'rollup-plugin-css-only';

...

export default {
...
plugins: [
css({ output: 'dist/bundle.css' }),

...
]
...
}
```