配置

说明

从 v2.0 版本起来,主要是通过项目路径下的 legoflow.json / legolfow.yaml / legoflow.js 作为配置文件,默认使用 legoflow.yaml

公共参数

name

项目名称,e.g.

name: test

version

创建项目使用的 LegoFlow 客户端或 CLI 版本号,e.g.

version: app@2.0.0

type

创建的项目类型,e.g.

type: vue

REM

是否使用 REM 适配。启动该选项后,_img.scss 会以 REM 为单位,e.g.

REM: true

ES.Next

是否对 JS 进行 ES.Next 语法的编译,默认值为 true, e.g.

ES.Next: true

alias

Webpack 别名配置,参考文档,e.g.

alias:
  axios: ./node_modules/axios
  jquery: ./src/assets/jquery.min.js

global

Webpack 全局对象,参考文档,e.g.

global:
  $: jquery
  jquery: jquery
  jQuery: jquery

externals

Webpack externals,参考文档,e.g.

externals:
  vue: Vue

includeModules

Webpack modules,默认已加入项目路径下的 node_modules参考文档,e.g.

includeModules:
  - ./test_node_modules

ESLint

是否启动 ESLint,启动后若项目下没有 ESLint 配置文件 的话,JS 部分默认会以 Standard 作为规范,vue 文件部分会以 plugin:vue/essential。e.g.

ESLint: true

默认配置:

module.exports = {
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "extends": [
    "standard",
    "plugin:vue/essential"
  ],
  "plugins": [
    "vue"
  ]
}

env

配置各种环境不一样的参数,e.g.

env:
  dev-test:
    alias:
      axios: ./src/assets/axios.min.js
  preview:
    workflow.build:
      html.resourcesDomain: https://preview.com
  test:
    workflow.build:
      html.resourcesDomain: https://test.com
  production:
    workflow.build:
      html.resourcesDomain: https://production.com

entry

一般情况下,webapck entry 是通过 内置策略 自动获取的,但你也可以通过该属性进行指定。e.g.

entry:
  - ./src/main.ts
  - ./src/test.js

# 或者

entry:
  main: ./src/main.ts
  test: ./src/test.js

mode

设置 Engine 模式。e.g.

mode: webpack

webpack

当设置 Engine 模式 为 webpack 的时候,以下属性生效,主要用来设置一些 Webpack 插件的配置。

以下参数请配置在 webpack 内使用,e.g.

webpack:
  imageQuality: 70

imageQuality

构建工作流,处理图片资源时,会进行图片压缩处理质量,默认为 90,e.g.

imageQuality: 70

build.sourceMap

构建工作流,同时生成 Source Map 文件,默认为 false,e.g.

build.sourceMap: true

VueChunkStyle

禁止 异步 vue 文件内的 Style 单独打包出样式文件,默认为 true,e.g.

VueChunkStyle: false

include

默认 Webpack loader 对文件的处理都 exclude 排除 node_modules 路径下的模块,而通过该属性可以指定一些模块加入 loader 的处理,例如:ESNext 语法编译等等,e.g.

include:
  esnext:
    - ./node_modules/sdk
  vue:
    - ./node_modules/alert

dll

dll 设置, 可通过命令行工具 cli,执行 lf build:dll 生成 dll 文件,e.g.

dll:
  vendor1:
    - vue
    - vue-router
    - vuex

html

设置 html-webpack-plugin 插件配置,e.g.

html:
  - template: ./src/html/index.html
    filename: index.html
    excludeChunks:
      - test
  - template: ./src/html/test.html
    filename: test.html
    excludeChunks:
      - main

babelModules

设置 babel env 转换模块规范 (详细), 默认值为 commonjs, e.g.

babelModules: false

uglifyOptions

设置 uglifyoptions 配置项 (详细),e.g.

uglifyOptions:
    keep_fnames: true

dev.https (v2.4.0+)

是否启动 https 模式,e.g.

https: true

build.htmlInject (v2.4.0+)

通过该配置注入 JS / CSS 静态资源,e.g.

build.htmlInject:
  a: 'https://a.com/a.css'
  b: 'https://b.com/b.js',
/* https://a.com/a.css */
html { background: red }
// https://b.com/b.js
console.log('b')

构建前

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <!-- @inject/link: a -->
  <!-- @inject/link: b -->

  <!-- @inject/inline: a -->
  <!-- @inject/inline: b -->
</body>
</html>

构建后

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <link rel="stylesheet" href="https://a.com/a.css">
  <script src="https://b.com/b.js"></script>

  <style type="text/css">html { background: red }</style>
  <script>console.log('b')</script>
</body>
</html>

build.copy (v2.4.0+)

通过该配置在构建后复制文件或文件夹,e.g.

build.copy:
  a.png: b.png
  assets: assets

构建后,./src/a.png 复制到 ./dist/b.png./src/assets 复制到 ./dist/assets

bundle.worker (v2.5.0+)

通过该配置可开启打包 WebWorker 文件进依赖链,e.g.

bundle.worker: true
new Worker('./worker.js', { type: 'module' })

开发工作流参数

以下参数配置在 workflow.dev,e.g.

workflow.dev:
    env: dev-test

hot.reload

代码热更新,e.g.

hot.reload: true

watch.reload

监听额外的文件夹,变动刷新浏览器,e.g.

watch.reload:
    - ./src/test/**/*

user.args

用户参数,根据用户名注入 Webpack define 插件变量, e.g.

# * 全部用户在 JS 文件中变量 process.args.token4Common 编译为 abc
# 用户为 test1,在 JS 文件中变量 process.args.token4User 编译为 123
# 用户为 test2,在 JS 文件中变量 process.args.token4User 编译为 321
user.args:
  *:
    token4Common: abc
  test1:
    token4User: 123
  test2:
    token4User: 321

env

开发工作流指向的环境参数,e.g.

env: dev-test

proxy

Webpack 代理,参考文档,e.g.

proxy:
  /api:
    target: http://xxx.com
    changeOrigin: true

shell

需要执行的 shell 脚本文件,e.g.

shell: ./shell/dev.js

onlyRunShell

否仅仅执行 Shell 脚本文件,e.g.

onlyRunShell: true

构建工作流参数

以下参数配置在 workflow.build,e.g.

workflow.build:
  env: preview

publicPath

Webpack output.publicPath 配置,参考文档,e.g.

publicPath: https://legoflow.com

html.resourcesDomain

类型于 1.x 版本 assets,构建时候对 html 文件引入的资源加入主域,e.g.

# 例如:<script src="./js/main.js"></script>
# 输出:<script src="https://legox.org/js/main.js"></script>
html.resourcesDomain: https://legox.org

css.resourcesDomain

类型于 1.x 版本 assets.css,构建时候对 css 文件引入的资源加入主域,e.g.

# 例如:background-image: ( ../img/icon.png )
# 输出:background-image: ( https://legox.org/img/icon.png )
css.resourcesDomain: https://legox.org

cache

对资源生成 哈希值 (hash) / 时间戳 (timestamp) / 版本号 (version) / 无 ( '' ),e.g.

# 哈希值:<script src="./js/main.js?h=aslm28u12mk2"></script>
# 时间戳:<script src="./js/main.js?t=1523518772795"></script>
# 版本号:<script src="./js/main.js?v=0.0.1"></script>
# 无:<script src="./js/main.js"></script>
cache: version

user.args

同理开发工作流 user.args 参数,e.g.

user.args:
  *:
    token4Common: abc
  test1:
    token4User: 123
  test2:
    token4User: 321

env

构建工作流指向的环境参数,e.g.

env: preview

shell

需要执行的 shell 脚本文件,e.g.

shell: ./shell/build.js

onlyRunShell

否仅仅执行 Shell 脚本文件,e.g.

onlyRunShell: true

output.webpackStats

是否构建出 webpack stats.json,有助于分析模块打包占比,e.g.

output.webpackStats: true

分析网站:webpack analysewebpack chart

noUglifyJs

构建出来的 JS 文件,是否不需要混淆,e.g.

noUglifyJs: true

Schema

{
  name: String,
  version: String,
  type: String,
  REM: Boolean,
  'ES.Next': Boolean,
  ESLint: Boolean,
  alias: Object,
  global: Object,
  externals: Object,
  env: Object,
  includeModules: Array,
  mode: String,
  friendlyErrors: Boolean,
  webpack: {
    imageQuality: Number,
    html: Object,
    dll: Array,
    include: {
      esnext: Array,
      vue: Array
    },
    babelModules: String,
    uglifyOptions: Object,
    VueChunkStyle: Boolean,
    'sass.globalResources': Array,
    'dev.https': Boolean,
    'build.sourceMap': Boolean,
    'build.html.inject': Object,
    'build.copy': Object
  },
  'workflow.dev': {
    env: String,
    'hot.reload': Boolean,
    'watch.reload': Array,
    'user.args': Object,
    proxy: Object,
    shell: String,
    onlyRunShell: Boolean
  },
  'workflow.build': {
    publicPath: String,
    'html.resourcesDomain': String,
    'css.resourcesDomain': String,
    'bundle.limitResourcesSize': Number,
    cache: String,
    'user.args': String,
    env: String,
    shell: String,
    onlyRunShell: Boolean,
    'output.webpackStats': Boolean
  }
}