feat: 增加 rollup-box

packages/cli/bin/index.js

@@ -42,7 +42,7 @@ program
 // add some useful info on help
 program.on('--help', () => {
   console.log()
-  console.log(`  Run ${chalk.cyan('vue <command> --help')} for detailed usage of given command.`)
+  console.log(`  Run ${chalk.cyan('pk <command> --help')} for detailed usage of given command.`)
   console.log()
 })
 

packages/esbuild-box/bin/index.js

@@ -0,0 +1,27 @@
+const esbuild = require('esbuild')
+
+module.exports = () => {
+  return esbuild({
+    include: /\.[jt]sx?$/,
+    exclude: /node_modules/,
+    sourceMap: false,
+    minify: process.env.NODE_ENV === 'production',
+    target: 'esnext',
+    jsxFactory: 'React.createElement',
+    jsxFragment: 'React.Fragment',
+    // Like @rollup/plugin-replace
+    define: {
+      __VERSION__: '"1.0.0"'
+    },
+    tsconfig: 'tsconfig.json',
+    // Add extra loaders
+    loaders: {
+      // Add .json files support
+      // require @rollup/plugin-commonjs
+      '.json': 'json',
+      // Enable JSX in .js files too
+      '.js': 'jsx',
+      '.ts': 'tsx',
+    }
+  })
+}

packages/esbuild-box/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@pkb/esbuild-box",
+  "version": "1.4.0",
+  "description": "使用 esbuild 打包",
+  "author": "luoxue",
+  "main": "index.js",
+  "bin": {
+    "esbuild-box": "bin/index.js"
+  },
+  "dependencies": {
+    "chalk": "^4.1.0",
+    "commander": "^7.2.0",
+    "didyoumean": "^1.2.1",
+    "esbuild": "^0.11.6"
+  }
+}

packages/gulp-box/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@pkb/gulp-box",
+  "version": "1.4.0",
+  "description": "使用 rollup 打包",
+  "author": "luoxue",
+  "main": "index.js",
+  "bin": {
+    "rollup-box": "bin/index.js"
+  },
+  "scripts": {
+    "build": "gulp",
+    "docs": "jsdoc src -d docs",
+    "open": "open ./docs/index.html"
+  },
+  "dependencies": {
+    "gulp": "^4.0.2",
+    "gulp-better-rollup": "^4.0.1",
+    "gulp-cli": "^2.3.0",
+    "gulp-jsdoc3": "^3.0.0",
+    "gulp-sass": "^4.1.0",
+    "jsdoc": "^3.6.4",
+    "open": "^7.0.4",
+    "opn": "^6.0.0",
+    "rollup": "^2.21.0",
+    "rollup-plugin-terser": "^6.1.0"
+  },
+  "devDependencies": {
+    "rollup-plugin-sass": "^1.2.2"
+  }
+}

packages/rollup-box/README.md

@@ -0,0 +1,29 @@
+# rollup-box
+
+rollup-box 集成大量的 rollup 插件，当你想要使用 rollup 打包时，你不需要考虑要使用哪些插件。使用 rollup 构建一个打包器可以快速构建一个或多个文件的打包。支持 js/ts/less/sass/jsx/tsx 等
+
+### 安装
+
+```sh
+npm i @pkb/rollup-box -g # 全局安装/本地安装
+
+rollup-box build # 构建项目
+rollup-box watch # 开发模式
+```
+
+JavaScript API
+
+```js
+const { builder, plugins, MODE } = require('@pkb/rollup-box')
+const options = {
+  input: {...}
+  output: {...}
+}
+// 所有插件都在 plugins 中，可以自主选择使用哪些插件，或者添加一些插件
+// MODE 提供两种模式 WATCH BUILD
+// options 是 rollup 配置，可默认不填
+builder(MODE.WATCH, plugins, options)
+```
+
+### 支持的插件
+

packages/rollup-box/bin/index.js

@@ -1 +1,73 @@
 #!/usr/bin/env node
+const program = require('commander')
+const path = require('path')
+const fs = require('fs')
+const chalk = require('chalk')
+const didYouMean = require('didyoumean')
+
+program
+  .version(`@pkb/rollup-box ${require('../package.json').version}`)
+  .usage('<command> [options]')
+
+const commandsPath = path.join(__dirname, '..', 'commands')
+const fileNames = fs.readdirSync(commandsPath)
+
+fileNames.forEach(fileName => {
+  const filePath = path.join(commandsPath, fileName)
+  const command = require(filePath)
+  command.registerCommand({
+    program,
+    cleanArgs,
+  })
+})
+
+// output help information on unknown commands
+program
+  .arguments('<command>')
+  .action((cmd) => {
+    program.outputHelp()
+    console.log('  ' + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`))
+    console.log()
+    suggestCommands(cmd)
+  })
+
+// add some useful info on help
+program.on('--help', () => {
+  console.log()
+  console.log(`  Run ${chalk.cyan('rollup-box <command> --help')} for detailed usage of given command.`)
+  console.log()
+})
+
+program.commands.forEach(c => c.on('--help', () => console.log()))
+
+program.parse(process.argv)
+
+if (!process.argv.slice(2).length) {
+  program.outputHelp()
+}
+
+function suggestCommands(unknownCommand) {
+  const availableCommands = program.commands.map(cmd => {
+    return cmd._name
+  })
+
+  const suggestion = didYouMean(unknownCommand, availableCommands)
+  if (suggestion) {
+    console.log('  ' + chalk.red(`Did you mean ${chalk.yellow(suggestion)}?`))
+  }
+}
+
+function camelize(str) {
+  return str.replace(/-(\w)/g, (_, c) => c ? c.toUpperCase() : '')
+}
+
+function cleanArgs(cmd) {
+  const args = {}
+  cmd.options.forEach(o => {
+    const key = camelize(o.long.replace(/^--/, ''))
+    if (typeof cmd[key] !== 'function' && typeof cmd[key] !== 'undefined') {
+      args[key] = cmd[key]
+    }
+  })
+  return args
+}

packages/rollup-box/build/build.js

@@ -0,0 +1,17 @@
+
+// https://www.rollupjs.com/guide/javascript-api#rolluprollup
+const rollup = require('rollup')
+
+module.exports = async (inputOptions, outputOptions, isNeedGenerate) => {
+  const bundle = await rollup.rollup(inputOptions)
+  process.env.NODE_ENV = 'production'
+
+  let bundler
+  if (isNeedGenerate) {
+    bundler = await bundle.generate(outputOptions);
+  } else {
+    bundler = await bundle.write(outputOptions);
+  }
+
+  return bundler
+}

packages/rollup-box/build/watch.js

@@ -0,0 +1,32 @@
+// https://www.rollupjs.com/guide/javascript-api#rollupwatch
+const rollup = require('rollup')
+const chalk = require('chalk')
+
+module.exports = async (inputOptions, outputOptions) => {
+  process.env.NODE_ENV === 'development'
+  const watcher = await rollup.watch({
+    ...inputOptions,
+    output: [outputOptions],
+    watch: {
+      chokidar: true,
+      include: 'src/**',
+      exclude: 'node_modules/**'
+    }
+  });
+
+  watcher.on('event', event => {
+    const code = event.code
+
+    if (code === 'ERROR') {
+      console.error(event)
+    }
+
+    if (code === 'BUNDLE_START') {
+      console.log(chalk.cyan('开始编译'))
+    }
+
+    if (code === 'BUNDLE_END') {
+      console.log(chalk.cyan('编译完成'))
+    }
+  });
+}

packages/rollup-box/commands/build.js

@@ -0,0 +1,15 @@
+exports.registerCommand = (params) => {
+  const { program } = params
+  program
+    .command('build')
+    .description('构建项目')
+    .action(() => {
+      build()
+    })
+}
+
+const build = async () => {
+  const { builder, plugins, MODE } = require('../index')
+
+  builder(MODE.BUILD, plugins)
+}

packages/rollup-box/commands/watch.js

@@ -0,0 +1,15 @@
+exports.registerCommand = (params) => {
+  const { program } = params
+  program
+    .command('watch')
+    .description('开发运行项目')
+    .action(() => {
+      watch()
+    })
+}
+
+const watch = async () => {
+  const { builder, plugins, MODE } = require('../index')
+
+  builder(MODE.WATCH, plugins)
+}

packages/rollup-box/index.js

@@ -0,0 +1,51 @@
+const path = require('path')
+const watch = require('./build/watch')
+const build = require('./build/build')
+const fs = require('fs')
+
+// 提供两种模式，watch 跟 rollup
+exports.MODE = {
+  WATCH: 'watch',
+  BUILD: 'rollup'
+}
+
+// 数组扁平化
+function flatten(arr) {
+  return arr.reduce((result, item)=> {
+      return result.concat(Array.isArray(item) ? flatten(item) : item);
+  }, []);
+}
+
+// 导出所有插件，可以自行选择使用哪些插件
+exports.plugins = (() => {
+  const pluginsPath = path.join(__dirname, 'plugins')
+  const pluginsName = fs.readdirSync(pluginsPath) || []
+
+  const plugins = pluginsName.map(_ => {
+    return require(path.join(pluginsPath, _))()
+  })
+
+  return flatten(plugins)
+})()
+
+// 构建项目
+exports.builder = async (mode, plugins, config = {}) => {
+  if (!mode) {
+    throw `需要使用 watch｜rollup 模式`
+  }
+
+  const inputOptions = Object.assign({
+    input: path.join(process.cwd(), 'src', 'index.ts'),
+    plugins
+  }, config.input || {})
+
+  const outputOptions = Object.assign({
+    name: 'app',
+    dir: 'dist',
+    format: 'cjs'
+  }, config.output || {})
+
+  const rolluper = mode === 'watch' ? watch : build
+
+  rolluper(inputOptions, outputOptions)
+}

packages/rollup-box/package.json

@@ -1,10 +1,21 @@
 {
-  "name": "rollup-box",
+  "name": "@pkb/rollup-box",
   "version": "1.4.0",
   "description": "使用 rollup 打包",
   "author": "luoxue",
   "main": "index.js",
   "bin": {
     "rollup-box": "bin/index.js"
+  },
+  "dependencies": {
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-auto-install": "^2.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-typescript": "^8.2.1",
+    "chalk": "^4.1.0",
+    "commander": "^7.2.0",
+    "didyoumean": "^1.2.1",
+    "rollup": "^2.44.0",
+    "rollup-plugin-terser": "^7.0.2"
   }
 }

packages/rollup-box/plugins/alias.js

@@ -0,0 +1,16 @@
+/**
+ * @rollup/plugin-alias
+ * @example
+ * import a from '@src/moudleA'
+ */
+const alias = require('@rollup/plugin-alias')
+const path = require('path')
+
+module.exports = () => {
+
+  return alias({
+    entries: [
+      { find: '@src', replacement: path.join(process.cwd(), 'src') }
+    ]
+  })
+}

packages/rollup-box/plugins/auto-install.js

@@ -0,0 +1,13 @@
+/**
+ * @rollup/plugin-auto-install
+ * 自动安装依赖
+ */
+const auto = require('@rollup/plugin-auto-install')
+const resolve = require('@rollup/plugin-node-resolve').default
+
+module.exports = () => {
+  return [
+    auto(),
+    resolve()
+  ]
+};

packages/rollup-box/plugins/terser.js

@@ -0,0 +1,9 @@
+/**
+ * rollup-plugin-terser
+ * 代码压缩
+ */
+const { terser } = require('rollup-plugin-terser')
+
+module.exports = () => {
+  return terser()
+}

packages/rollup-box/plugins/typescript.js

@@ -0,0 +1,9 @@
+/**
+ * @rollup/plugin-typescript
+ * 支持ts
+ */
+const typescript = require('@rollup/plugin-typescript')
+
+module.exports = () => {
+  return typescript(/*{ plugin options }*/)
+}