Struk NPM | npm.io

Struk

📦 基于 rollup 的 JS、TS、Vue2、React 包基础核心构建工具 One common construction and package tool for JS/TS/Vue2/React components based on Rollup 📦

✨ Features

基于 rollup 的基础核心构建工具
支持 Javascript、Typescript、Vue2、React
支持自定义banner，可通过指定package中cusBannerString字段值修改本工具品牌名称
Basic core build tools based on rollup
Supports mutiple frameworks such as JavaScript, TypeScript, Vue2, React
Support custom banner, you can modify the brand name of this tool by specifying the value of the cusBannerString field in the package

🚀 Quick Start

Installion

npm i -D struk@latest # OR yarn add -D struk@latest

Usage

First Step：Add the scripts in package.json：

  "scripts": {
    "build": "NODE_ENV=production struk build --source=js"
  },

需要通过参数source指定构建打包源文件格式，其取值为'js', 'ts', 'vue', 'react'四种格式之一。

You need to specify the build and packaging source file format through the parameter 'source', and its values are one of the four formats of 'js', 'ts', 'vue', 'react''.

Second Step：Goes to the project directory and runs:

npm run build # OR yarn build

struk 默认以 src/index.js 为入口，在 dist 目录输出 'umd', 'es', 'cjs', 'iife', 'amd' 五种格式的构建包（包含未压缩和已压缩版本）。

struk defaults to 'src/index.js' as the entry, and outputs 'umd', 'es', 'cjs', 'iife', 'amd'' build packages (including uncompressed and compressed versions) in the 'dist' directory.

Custom Config

可在项目根目录新建 struk.config.js 自定义 struk 构建配置（或在 package.json 中使用 strukConfig 对象配置）。

You can create a new 'struk.config.js' custom struk build configuration at the project root (or use the 'strukConfig' object configuration in 'package.json')

支持自定义banner，可通过指定package.json文件中cusBannerString字段值修改本工具品牌名称。

Custom banners are supported, and you can modify the brand name of the tool by specifying the value of the cusBannerString field in the package.json file

如需指定打包需要隔离的依赖包，则可配置 formatConfig 属性对象

If you need to specify that packaging depends on packages that need to be isolated, you can configure the formatConfig property object

  "formatConfig": {
    [format]: {
      external: ['xxx']
    }
  },

如需整体隔离 dependences 全体依赖包，可指定 isolateDep: true

To isolate all dependent packages of dependences as a whole, specify isolateDep: true

  "formatConfig": {
    [format]: {
      isolateDep: true,
    }
  },

debug 并且非production环境状态会自动开启 rollup-serve，可配置 templateBase 属性指定模版 index.html 所在路径

The debug and development states automatically turns on rollup-serve, and you can configure the templateBase property to specify the path where the template index.html is located.

  "formatConfig": {
    templateBase: 'examples/',
  },

struk 默认配置/配置示例 Default Config

/**
 * struk 默认配置 Default Config
 */
module.exports = ({ pkg } = {}) => {
  return {
    // 输入 Input
    input: 'src/index.js',

    // 输出 Output
    output: {
      // 目录 directory
      directory: 'dist',
      // 包名 name
      name: /\//.test(pkg.name) ? pkg.name.match(/\/(.+)/)[1] : pkg.name,
      // 格式 format
      format: ['umd', 'es', 'cjs', 'iife', 'amd'],
      // 顶部注释 banner
      banner: `/*!
* ${pkg.name} with v${pkg.version}
* Author: ${pkg.author}
* Built on ${new Date().toLocaleDateString()}
* Released under the ${
        pkg.license
      } License Copyright (c) 2021-${new Date().getFullYear()}
*/`
    },
    formatConfig: {
      umd: {
        // 打包屏蔽的外部模块 Shielded external modules
        external: ['lodash', 'moment'],
        // 外部pkg.dependences依赖不屏蔽 Isolate dependences not blocking
        isolateDep: false
      },
      es: {
        external: ['lodash', 'moment'],
        // 自动屏蔽全部pkg.dependences依赖 Blocking isolate dependences
        isolateDep: true
      },
      cjs: {
        external: [],
        isolateDep: false
      },
      iife: {
        external: [],
        isolateDep: false
      },
      amd: {
        external: [],
        isolateDep: false
      }
    },
    skipAlert: true, // 重复路径是否提示覆盖并继续构建，默认不提示 Whether the duplicate path prompts to override and continue building, it is not prompted by default
    templateBase: 'examples/', // rollup-plugin-serve build base
    // devServeInput: 'examples/index.js', // rollup-plugin-serve build input file
    replaceMaps: {},
    stylusAlias: {
      '@': path.join(cwd, './node_modules/@')
    },
    styleExtract: false
  }
}