JavaScript

Entry

scripts.entry

object

The entry point for the bundle. Defaults to null.

  1. key(string): value(string): Bundle one entry point per HTML page.
  2. key(string): value(array): Creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.

🌰 For example:

scripts: {
  entry: {
    'lib': ['vue', 'vue-router', 'vuex'],
    'ui': ['balm-ui-lite'],
    'home-page': './app/scripts/main.js',
    'sub-page': './app/scripts/subpage.js'
  }
}

Then, your HTML templates:

<!-- Page One -->
<script src="%PUBLIC_URL%/scripts/vendor/lib.js"></script>
<script src="%PUBLIC_URL%/scripts/vendor/ui.js"></script>
<script src="%PUBLIC_URL%/scripts/home-page.js"></script>
<!-- Page Two -->
<script src="%PUBLIC_URL%/scripts/vendor/lib.js"></script>
<script src="%PUBLIC_URL%/scripts/vendor/ui.js"></script>
<script src="%PUBLIC_URL%/scripts/sub-page.js"></script>

Output

scripts.library

string

New in 0.8.4

The name of the exported library. Defaults to ''.

scripts.libraryTarget

string

New in 0.8.4

The type of the exported library. Defaults to 'var'.

Supported options: var, this, window, global, commonjs, commonjs2, amd, umd.

scripts.umdNamedDefine

string

New in 0.9.0

When using libraryTarget: 'umd', setting:

umdNamedDefine: true;

Loaders

scripts.loaders

array

An array of automatically applied loaders. Defaults to [].

Each item can have these properties:

  • test: A condition that must be met
  • exclude: A condition that must not be met
  • include: A condition that must be met
  • loader: A string of “!” separated loaders
  • loaders: An array of loaders as string

BalmJS default loaders:

List of loaders

🌰 For example:

First, install some loader:

$ npm i -D vue-loader

# OR install with yarn
$ yarn add -D vue-loader

Then, use it:

import VueLoaderPlugin from 'vue-loader/lib/plugin';

// ...

scripts: {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ],
  plugins: [new VueLoaderPlugin()]
}

scripts.extensions

array

An array of extensions that should be used to resolve modules. Defaults to [].

BalmJS default extensions:

  • .wasm (New in 0.17.0)
  • .mjs (New in 0.17.0)
  • .js
  • .json
  • .jsx
  • .ts (New in 1.1.1)
  • .tsx (New in 1.1.1)
  • .vue

🌰 For example:

scripts: {
  extensions: ['.ts', '.tsx'];
}

Before, usage:

// main.js
import foo from 'foo.ts';

Now, you can:

// main.js
import foo from 'foo';

scripts.alias

object

Replace modules by other modules or paths. Defaults to {}.

🌰 For example:

scripts: {
  alias: {
    'vue$': balm.config.isProd ? 'vue/dist/vue.min.js' : 'vue/dist/vue.esm.js'
  }
}

Plugins

scripts.plugins

array

Add additional plugins to the compiler. Defaults to [].

List of plugins

Development

scripts.hot

boolean

Hot reload. Defaults to true.

scripts.sourceMap

boolean

Source mapping. Defaults to false.

scripts.target

string

To target a specific environment. Defaults to 'web'.

Target config

scripts.externals (Rename in 0.20.0)

string array object function regex

New in 0.9.0, rename cdn to externals in 0.20.0

The same to webpack externals. Defaults to null.

scripts.stats

object

Capture timing information for each module. Defaults to:

{
  colors: true,
  modules: false,
  children: false,
  chunks: false,
  chunkModules: false
}

Stats config

Advanced Options

scripts.webpack

object

New in 0.8.4

Overwrite webpack config. Defaults to {}.

All configuration options

scripts.include

array

New in 0.9.1

Supply a Rule.include option in babel-loader for some vendor scripts from node_modules. Defaults to [].

scripts.eslint

boolean

The pluggable linting utility for JavaScript and JSX. Defaults to false.

scripts.options

object

New in 1.1.0

Terser minify options. Defaults to:

{
  parse: {
    ecma: 8
  },
  compress: {
    ecma: 5,
    warnings: false,
    comparisons: false,
    inline: 2
  },
  mangle: {
    safari10: true
  },
  output: {
    ecma: 5,
    comments: false,
    ascii_only: true
  }
}

UglifyJS options. (Version > 0.6.0 and < 1.1.0) Defaults to:

{
  compress: {
    comparisons: false,
    drop_console: true
  },
  output: {
    ascii_only: true
  }
}

scripts.inject

boolean

New in 1.1.2

Support the hash scripts in the SSR build. Defaults to: false.

Optimization

scripts.optimization

object

New in 0.17.0

Best practices of web performance. Defaults to:

{
  splitChunks: {
    chunks: 'async',
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    name: true,
    cacheGroups: {}
  }
}

scripts.vendorName

string

AllInOne vendor filename or Custom Vendor folder name. Defaults to 'vendor'.

scripts.extractAllVendors

boolean

Named scripts.vendor in version < 0.12.0

All vendors in one (for SPA). Defaults to false.

HTML template:

<!-- All vendors in one -->
<script src="%PUBLIC_URL%/scripts/vendor.js"></script>
<!-- Entry -->
<script src="%PUBLIC_URL%/scripts/main.js"></script>

scripts.vendors

array

Custom Vendor Modules. Defaults to []. (automatic setting by scripts.entry)

scripts.cssLoader

boolean

New in 0.12.0

Use BalmJS default rules or custom rules for css-loader. Defaults to true.

scripts.extractCss

object

New in 0.12.0

Extract css from some bundle. Defaults to:

{
  enabled: false,
  prefix: ''
}

⚠️ TIPS: Separating styles from scripts for modular management is more conducive to project maintenance and expansion, See BalmJS advanced usage - Code Splitting.

scripts.base64Limit

number

New in 0.22.0

Loads files as base64 encoded URL. Defaults to: 10000.

results matching ""

    No results matching ""