angular2-extjs-webpack-plugin

    0.0.34 • Public • Published

    Angular2 Ext JS Webpack Plugin

    This Webpack plugin produces a minimized build of the Sencha Ext JS framework containing only those classes used by your Angular2 app. Use with the angular2-extjs custom renderer for Angular2.

    How it works

    The plugin crawls your Angular2 source code looking for selector tags that match Ext JS xtypes as well as calls to Ext.create() and Ext.require() to compile a list of classes used by your app. It then uses Sencha Cmd to produce an optimized build of Ext JS containing only those classes and corresponding CSS. It then includes the built js and css files into your index.html.

    Dependencies

    You must have Ext JS 6.2+ and Sencha Cmd 6.2+ to use this plugin.

    Options

    The Angular2ExtJSWebpackPlugin constructor takes an object with the following properties:

    • debug [boolean] True to output debug information.
    • detail [boolean] True to output more detailed debug information.
    • indexHtmlLocation [string] The path to the source file index.html.
    • indexHtmlTitle [string] The title in the index.html.
    • rootSelector [string] the root selector in the index.html file.
    • build [string] Which Ext JS build to produce (testing or production).
    • extThemeAppPath [string] The path for the Ext JS Theme project that will be created.
    • extThemeAppName [string] The name of the Ext JS Theme project that will be created.
    • extFrameworkPath [string] The path to the Ext JS framework.

    Example

    'use strict';
     
    const path = require('path');
    const webpack = require('webpack');
    const Angular2ExtJSWebpackPlugin = require('angular2-extjs-webpack-plugin');
     
    module.exports = {
        devtool: 'inline-source-map',
        entry: [
            './src/index'
        ],
        output: {
            path: path.join(__dirname, 'build'),
            filename: 'index.js'
        },
        plugins: [
            new ExtJSAngular2WebpackPlugin({
                indexHtmlLocation: 'src',
                indexHtmlTitle: 'Angular2 Webpack',
                rootSelector: 'my-app',
                build: 'testing', // testing, production
                extThemeAppPath: '.',
                extThemeAppName: 'Theme',
                extFrameworkPath: '~/Downloads/ext-6.2.0',
                debug: false
            })
        ],
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel',
                    include: [
                            path.join(__dirname, 'src')
                    ]
                },
                {
                    test: /\.css$/,
                    loader: 'style!css'
                },
                {
                    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
                    exclude: /\/favicon.ico$/,
                    loader: 'file',
                    query: {
                        name: 'static/media/[name].[hash:8].[ext]'
                    }
                }
            ]
        }
    };

    Keywords

    none

    Install

    npm i angular2-extjs-webpack-plugin

    DownloadsWeekly Downloads

    0

    Version

    0.0.34

    License

    MIT

    Last publish

    Collaborators

    • mgusmano