How to bundle Syncfusion ReactJS components using webpack and browserify?

2 mins read

Using Syncfusion ReactJS application with webpack

To bundle the Syncfusion components into one file using webpack and refer it to your application. Follow the steps below to configure Syncfusion React components with Webpack bundling,

Create a new application with React and webpack or else we have prepared a demo sample available in the following link, https://www.syncfusion.com/downloads/support/directtrac/172675/ze/Webpack-bundling453315217
Open command prompt, navigate to the application root folder then install webpack, react by using the below commands.

$ npm install --save-dev webpack

$ npm install react@15.5.0

$ npm install react-dom@15.5.0

Configure Syncfusion JavaScript components through npm https://help.syncfusion.com/js/overview. This will fetch Syncfusion dependent files through node.
Add the required scripts for bundling in “webpack.config.js” entry. You can add required scripts here to bundle it to single script file.

'use strict';

const webpack = require('webpack');

const glob=require('glob');

let config = {

entry: {

myPages: [

'./node_modules/syncfusion-javascript/Scripts/ej/common/ej.core.min.js',

'./node_modules/syncfusion-javascript/Scripts/ej/common/ej.data.min.js',

'./node_modules/syncfusion-javascript/Scripts/ej/common/ej.scroller.min.js',

'./node_modules/syncfusion-javascript/Scripts/ej/common/ej.touch.min.js',

'./node_modules/syncfusion-javascript/Scripts/ej/web/ej.button.min.js',

'./node_modules/syncfusion-javascript/Scripts/ej/web/ej.checkbox.min.js',

'./node_modules/syncfusion-javascript/Scripts/ej/web/ej.autocomplete.min.js',

'./node_modules/syncfusion-javascript/Scripts/ej/common/ej.web.react.min.js',

'./app/main.js'

]

module: {

loaders: [

// Javascript: js, jsx

{

test: /\.jsx?$/,

loader: 'babel-loader',

query: {

presets: ['es2015', 'react']

}

]

output: {

path: './dist',

filename: 'bundle.js'

}

};

module.exports = config;

Now you can create Syncfusion ReactJS components and add it. https://help.syncfusion.com/reactjs/overview
Run the demo sample to render Syncfusion ReactJS components.

Using Syncfusion ReactJS application with Browserify

To bundle the Syncfusion components into one file using browserify and refer it to your application. Follow the steps below to configure Syncfusion React components with browserify bundling,

Create an application configuring npm, gulp, react and browserify or get the demo sample available in the link below:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReactJSbrowserify-bundling-2080678114349055693

Open command prompt, navigate to the application root folder then install browserify, gulp using the below commands.

$ npm install browserify

$ npm install gulp

Configure Syncfusion JavaScript components through npm https://help.syncfusion.com/js/overview
Configure your app for gulp task and bundling with browserify using the “browserify” command.

var gulp = require('gulp');

var browserify = require('browserify');

var source = require('vinyl-source-stream');

var gutil = require('gulp-util');

gulp.task("js", function(){

var destDir = "./dist";

return browserify([

"./node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js",

"./node_modules/syncfusion-javascript/Scripts/ej/common/ej.web.react.min.js"

])

.bundle()

.pipe(source("appBundle.js"))

.pipe(gulp.dest(destDir))

});

Now you can create Syncfusion React components and add it.

https://help.syncfusion.com/reactjs/overview

Run the demo sample to render Syncfusion ReactJS components using the below command

$ gulp js

Did you find this information helpful?

Yes

Comments

How to bundle Syncfusion ReactJS components using webpack and browserify?

Using Syncfusion ReactJS application with webpack

Using Syncfusion ReactJS application with Browserify

Access denied