# 脚本

# scripts.entry

interface BalmEntryObject {
  [entryChunkName: string]: string | string[];
}

scripts.entry: string | string[] | BalmEntryObject = ''

脚本入口点。

scripts.entryBalmEntryObject 对象时:

  1. { [key: string]: value: string }: 每个 HTML 页面对应一个脚本入口文件。
  2. { [key: string]: value: string[] }:(提取第三方模块)创建一个单独的文件,由多个入口脚本之间共享的通用模块组成。

🌰 举个栗子:

balm.config = {
  scripts: {
    entry: {
      lib: ['vue', 'vue-router'],
      ui: ['balm-ui'],
      app: './app/scripts/main-page.js',
      subapp: './app/scripts/sub-page.js'
    }
  }
  // 其他配置项...
};

然后,你的 HTML 模板中就可以使用自定义提取 libui

<!-- 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/app.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/subapp.js"></script>

Tips: You can rename vendors with scripts.vendorsName.

# scripts.library

scripts.library: string | object = ''

导出的库的名称。

# scripts.libraryTarget

scripts.libraryTarget: string = 'var'

导出的库的类型。

支持的选项:var, this, window, global, commonjs, commonjs2, amd, umd.

🌰 举个栗子:

balm.config = {
  scripts: {
    library: 'AwesomeLibraryName',
    libraryTarget: 'umd'
  }
  // 其他配置项...
};

# scripts.loaders

scripts.loaders: Rule[] = []

一系列自动应用的 loaders

BalmJS 默认已加载的 loaders:

Loaders 列表

🌰 举个栗子:

首先,安装一个你需要的 loader(下面以 vue-loader 为例):

yarn add -D vue-loader
# OR
npm i -D vue-loader

然后,加载它:

const VueLoaderPlugin = require('vue-loader/lib/plugin');

balm.config = {
  scripts: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
    plugins: [new VueLoaderPlugin()]
  }
  // 其他配置项...
};

# scripts.includeJsResource

scripts.includeJsResource: string[] = []

绝对路径)在 babel-loader 中为某些需要额外依赖的脚本提供一个 Rule.include 选项。

# scripts.defaultLoaders

interface BalmScriptsDefaultLoaders {
  html?: boolean;
  css?: boolean;
  js?: boolean;
  url?: boolean;
}

scripts.defaultLoaders: BalmScriptsDefaultLoaders = {}

Rename disableDefaultLoaders to defaultLoaders in 2.5.0

启用或禁用 BalmJS 某些默认 loaders。

# scripts.htmlLoaderOptions

scripts.htmlLoaderOptions: object = {}

New in 2.11.0

balm 默认的 html-loader 中额外的配置。

# scripts.postcssLoaderOptions

interface PostcssLoaderOptions {
  exec?: boolean;
  parser?: string | object;
  syntax?: string | object;
  stringifier?: string | object;
  config?: object;
  plugins?: object[] | Function; // NOTE: 等同于 `styles.postcssPlugins`
  sourceMap: string | boolean;
}

scripts.postcssLoaderOptions: PostcssLoaderOptions = { sourceMap: false }

Migrated from styles.postcssLoaderOptions in 2.11.0

PostCSS loader 详细配置

# scripts.urlLoaderOptions

scripts.urlLoaderOptions: object = {}

New in 2.1.0

balm 默认的 url-loader 中额外的配置。

🌰 举个栗子:

balm.config = {
  scripts: {
    urlLoaderOptions: {
      esModule: false
    }
  }
  // 其他配置项...
};

vue 文件之前的用法:

<template>
  <img :src="require('@/assets/logo.png').default" />
</template>

现在的用法:

<template>
  <img :src="require('@/assets/logo.png')" />
</template>

# scripts.extensions

scripts.extensions: string[] = []

用来解析模块的文件扩展。

BalmJS 默认已支持的扩展名:

🌰 举个栗子:

balm.config = {
  scripts: {
    extensions: ['.vue']
  }
  // 其他配置项...
};

之前的用法:

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

现在的用法:

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

# scripts.alias

scripts.alias: object = {}

自定义别名,用其他模块或路径替换模块。

🌰 举个栗子:

balm.config = {
  scripts: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  }
  // 其他配置项...
};

# scripts.plugins

scripts.loaders: plugins[] = []

添加额外的插件到编译器。

Plugins 列表

# scripts.hot

scripts.hot: boolean = true

开启热加载。

# scripts.sourceMap

scripts.sourceMap: string | boolean = false

开启源映射。

# scripts.target

scripts.target: string = 'web'

针对特定的环境来编译脚本。

# scripts.externals

scripts.externals: string | object | Function | RegExp = ''

同 webpack 的 externals 参数。

# scripts.stats

scripts.stats: string | object

捕获每个模块的编译信息。详细配置

默认值为:

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

# scripts.webpackOptions

scripts.webpackOptions: object = {}

完整的 webpack 配置

# scripts.lint

scripts.lint: boolean = false

开启 JavaScript 和 JSX 的代码规范验证。

# scripts.options

scripts.options: object

JS 压缩 详细配置

默认值为:

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

# scripts.inject

scripts.inject: boolean = false

支持 SSR 模式中构建脚本生成 hash。

# scripts.optimization

scripts.optimization: object = {}

WEB 性能优化。详细配置

# scripts.extractAllVendors

scripts.extractAllVendors: boolean = false

  • HTML 模板:
<!-- 提取所有第三方脚本 -->
<script src="%PUBLIC_URL%/scripts/vendor.js"></script>
<!-- 入口脚本 -->
<script src="%PUBLIC_URL%/scripts/main.js"></script>

Tips: 你可以使用使用 scripts.vendorsName 来重命名 vendors

# scripts.vendorsName

scripts.vendorsName: string = 'vendors'

提取 所有第三方依赖 合成一个文件的 文件名,或提取 部分第三方依赖 合成自定义文件的 文件夹名

# scripts.extractCss

scripts.extractCss: { enabled: boolean; prefix: string; }

提取脚本中的样式。

默认值为:

{
  enabled: false,
  prefix: ''
}

⚠️ 提示: 将样式从脚本中分离进行模块化管理更有利于项目维护和扩展,详见 BalmJS 进阶用法 - 代码分离

# scripts.ie8

scripts.ie8: boolean = false

New in 2.2.0

支持低版本 IE 浏览器(IE6-8)。IE 向下兼容性配置.

如果启用了 scripts.ie8scripts.hot 将失效。

⚠️ 提示: 在 IE8 中,请不要使用 (ES6) Classgetset 用法。

Last Updated: 2 months ago