egoist / bili Goto Github PK

View Code? Open in Web Editor NEW

1.0K 21.0 74.0 3.38 MB

Bili makes it easier to bundle JavaScript libraries.

Home Page: https://bili.egoist.sh

License: MIT License

JavaScript 9.20% TypeScript 90.80%

rollup bundle buble babel typescript bundler package

bili's Introduction

Bili

Features

🚀 Fast, zero-config by default.
📦 Using Rollup under the hood.
🚗 Automatically transforms JS files using Buble/Babel/TypeScript.
💅 Built-in support for CSS Sass Stylus Less CSS modules.
🎶 Ridiculously easy to use Rollup plugins if you want.
🚨 Friendly error logging experience.
💻 Written in TypeScript, automatically generated API docs.

Documentation

https://bili.egoist.sh

Author

bili © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

Website · GitHub @EGOIST · Twitter @_egoistlily

bili's People

Contributors

Stargazers

Watchers

bili's Issues

Disable babel-plugin-transform-object-rest-spread for buble

We should use buble's own objectAssign option instead for smaller output.

`buble.transforms` gets deleted after compiling first target

Given this bili.config.js:

module.exports = {
  format: ['cjs', 'es'],
  buble: {
    transforms: {
      dangerousTaggedTemplateString: true
    }
  }
}

It won't pickup buble.transforms for the es build because you seem to delete them at ./get-rollup-options.js#L43 after the cjs build.

So for every subsequent target it compiles without the transform options.

Auto load some plugins

e.g. If resolved modules include .ts files, we should automatically require rollup-plugin-typescript from cwd, the same strategy applies to .vue .css files etc..

Add closure-compiler-js support

Could be an option for minifier

Refactor tests

We should allow it generate files without actually writing to disk, could be useful for tests.

Can't make run in browser

Hello,

I have successfully compiled un UMD format, but I can not make it run in browser

<!DOCTYPE html>
<html lang="en">

<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
	<script src="./dist/index.js"></script>
</head>
<body>
	<div id="app">
		<my-component></my-component>
	</div>
	<script>
		window.onload = function () {

			new Vue({
				el: "#app",
				components: {
					MyComponent
				}
			})
		}
	</script>
</body>
</html>

I got the followinn error : Vue.component is not a function

regards

A new option to set `globals`

When using externals with UMD builds, rollup tries to guess the global name of the module and throws a warning that it may be specified with globals option.

Add a progress bar

For a large library like https://github.com/egoist/vue-feather-icons it takes quite a long time to build.

Question: should bili clear dist folder before build?

That's what most build script usually do.

Auto update package.json with generated files

Run bili update-pkg:

{
+ "main": "dist/index.cjs.js",
+ "module": "dist/index.m.js",
+ "cdn": "dist/index.js",
+ "unpkg": "dist/index.js"
}

Support multiple bili instances

eg:

// bili.config.js
module.exports = [
  { entry: 'src/a.js', replace: { ENV_A: 'env_a'} },
  { entry: 'src/b.js' }
]

Check bundle size

{
	"bili": {
		"sizeLimit": {
			"cjs": "3kb"
		}
	}
}

And it exists with an non-zero code when bundle size exceeds this limit.

Add watch option

You can check out https://github.com/rollup/rollup/tree/master/bin/src for reference.

Butternut instead of Uglify

What about using Butternut ?

To make Bili the right tool for @Rich-Harris aficionados 👍

Isnt it too young for you ?

Currently when running bili with a scoped module name e.g. @tiaanduplessis/foo the @tiaanduplessis is interpreted as a directory. This results in a sub-directory being created within the dist folder e.g. dist/@tiaanduplessis/foo.js. I believe this can quickly be changed by including a check for a scoped module name within the getDist function of get-rollup-options.js and changing the filename accordingly. Will be happy to create a PR.

Dev server

Serve dist folder with an http server and use an index.html to load these files so that you can view it in browser.

It should remove dist folder before start.

Inline specific external modules

eg. bili --inline object-assign will inline package object-assign in output cjs bundle, currently the inline flag only accpet boolean and defaults to true in umd format.

Update options depending on format/compress or other variables

// bili.config.js
const merge = require('lodash/merge')

module.exports = {
  extendOptions(options, { format, compress }) {
    if (format === 'umd') {
      options = merge(options, { 
		env: { NODE_ENV: compress ? 'production' : 'development' } 
      })
    }
    return options
  }
}

Use rollup-plugin-babel by default

it's been at least 4 times that buble gives me broken code. 😅

use rollup-plugin-babel by default
update docs

Add bili --init option

To initialize bili in an existing project:

add an npm script:

{
  "scripts": {
    "build": "bili"
  }
}

add bili.config.js? or add bili field in package.json?

Allow to disable JS transformation

At the moment js: false result to the use of Bublé.

How if I want to use bili to quickly bundle and keeping my own es2015 transformation workflow ?

Prettier output

Use Prettier to prettify output

Change suffix of es format to `.es`

can not be packaged when import css by style tag

when import by

<style src="../node_modules/dplayer/dist/DPlayer.min.css"></style>

repo: https://github.com/MoePlayer/vue-dplayer

Automatically replace `process.env.NODE_ENV`

With --replace-env option it automatically replace process.env.NODE_ENV depending on the format:

cjs es: will not replace
umd/iife: replace with development
compress: replace with production

The logo is ugly, please change it

Using bili and cssnano for minification

I am trying to use the postcss feature of bili to minimize my CSS output.
This is my package.json:

{
  "name": "TestComponent",
  "description": "A short template test",
  "version": "1.0.0",
  "license": "MIT",
  "bili": {
    "input": "./src/main.js",
    "outDir": "dist",
    "formats": [
      "umd-min"
    ],
    "moduleName": "TestComponent",
    "plugins": [
      "vue"
    ],
    "globals": {
      "vue": "Vue"
    },
    "banner": true,
    "postcss": {
      "extract": true,
      "sourceMap": true,
      "minimize": true
    }
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "bili": "^2.2.3",
    "cross-env": "^5.1.3",
    "cssnano": "^3.10.0",
    "rollup-plugin-postcss": "^1.2.7",
    "rollup-plugin-vue": "^3.0.0",
    "vue-template-compiler": "^2.5.13"
  },
  "dependencies": {
    "vue": "^2.5.13"
  }
}

Unfortunately, no CSS is getting minimized nor are the source maps generated. At least the resulting file is called TestComponent.min.css but that's not really helping. The vue component file is as basic as it could be, nothing fancy there.

Any advice would be highly appreciated.

Run with a server

bili --server will serve ./dist at /dist, and your can optionally pass a directory to serve at /, might be useful for developing

Build bubleup with bubleup

a.k.a. eat my own dog food 😝

JSX

I have successfully compiled

export default Vue => {
  Vue.component('my-component', {
    render: h => h('h2', null, ['hello bili'])
  })
}

which gave

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.MyComponent = factory());
}(this, (function () { 'use strict';

var Component = (function (Vue) {
  Vue.component('my-component', {
    render: function render(h) {
      return h(
        'h1',
        null,
        ['HELLO']
      );
    }
  });
});

var index = (function (Vue) { return Vue.component(Component.name, Component); });

if (typeof window !== 'undefined' && window.Vue) {
	Vue.component(Component.name, Component);
}

return index;

})));

But nothing displays on html page

<!DOCTYPE html>
<html lang="en">

<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
	<script src="./dist/index.js"></script>
</head>

<body>
	<div id="app">
		ss
		<my-component></my-component>
	</div>
	<script>

		window.onload = function () {

			new Vue({
				el: "#app",
				components: {

				}
			})
		}
	</script>
</body>
</html>

bili.filename is overridden with package name

If the bili key in package.json file is being used to configure and filename option also exists, it will be overridden by package name. I think we need additional check here

Example: (package.json)

{
  "name": "xyz",
  "bili": {
     "filename": "foobar"
   }
}

This still makes output to "xyz"

Add warning for `external` option

I saw some people use something like --external react option with --format umd, technically it's not wrong but you may use --global option to ensure module name you want in umd bundle, so you can use --global.react React which will also automatically add react to external.

Use uglify-es when Buble is `false`

You know, Uglify will throw if found modern code (even the latest releases). So using the es package, would make sense if someone disable the Buble transformation, explicitly.

I had same ideas, almost, for the @rolldown, but also built some resolving packages, so it makes customizing and loading pretty awesome. ;] For example loading plugins from both global and local. See how awesome is resolve-plugins-sync (may be interested in resolve-package, too. used by electron-forge) it can be used for "transforms", "plugins", "presets" and etc, because any of those are just same concepts.
You can try to integrate it here, so resolving logic and passing options to each plugin may be removed.

Good job, anyway.

Use babel@7

migrate src/babel.js
Use @babel/core in Jest

Warn about `suffix` while targeting multi formats

If you remove suffix in filename option and use multi formats like format: 'cjs,umd' then both bundles will result in the same path ./dist/xxx.js which is a trouble.

We should add a warning for this situation:

[warn] Don't remove `[suffix]` in `filename` option while targeting multiple formats.

However mixing something like umd and umd-min is allowed since we add .min suffix anyways.

And exit if necessary.

--format causes TypeError: Cannot read property 'map' of undefined

In latest bili version using --format option causes the error below.

MacBook-Pro-de-Vitor:Binance-Transactions vitorcavalcanti$ npm run build

> [email protected] build /Users/vitorcavalcanti/Projects/Binance-Transactions
> bili --format cjs,umd,umd-min

/Users/vitorcavalcanti/Projects/Binance-Transactions/node_modules/cac/dist/cac.js:248
        console.log(`The value of flag "${option.name}" should be one of: ${option.choices.map(choice => `"${choice}"`)}`);
                                                                                           ^

TypeError: Cannot read property 'map' of undefined
    at Cac.cli.on (/Users/vitorcavalcanti/Projects/Binance-Transactions/node_modules/cac/dist/cac.js:248:92)
    at Cac.emit (events.js:164:20)
    at Cac.parse (/Users/vitorcavalcanti/Projects/Binance-Transactions/node_modules/cac/dist/cac.js:409:10)
    at Object.<anonymous> (/Users/vitorcavalcanti/Projects/Binance-Transactions/node_modules/bili/lib/cli.js:55:5)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Function.Module.runMain (module.js:682:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `bili --format cjs,umd,umd-min`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vitorcavalcanti/.npm/_logs/2017-12-30T03_52_21_061Z-debug.log

--format option not taking into account using .bilirc

Hi @egoist ! how are you? I'm trying to configure bili using the config rc file but it seems that the format option is not working if is defined in the file, only works through the command line option.

this is my .bilirc

{
  "format": ["cjs-min", "umd-min"],
  "external": ["mobx", "mobx-state-tree"]
}

and i'm using the bili v1.2.2

great project btw! thanks!

The year in banner should not default to current year

bili/src/get-banner.js

Line 17 in a073776

const year = pkg.year || new Date().getFullYear()

Maybe we can make it default to the year when the first commit was made.

Question: compress with vue plugin?

I tired to:

bili --plugins vue --compress

Error:

{ Error: Error transforming bundle with 'uglify' plugin: Unexpected token: punc (()
    at error (/Users/Nemo/dev/workspace/vue-one-size/node_modules/rollup/dist/rollup.js:177:12)
    at /Users/Nemo/dev/workspace/vue-one-size/node_modules/rollup/dist/rollup.js:9456:5
    at process._tickCallback (internal/process/next_tick.js:109:7)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:393:7)
    at startup (bootstrap_node.js:150:9)
    at bootstrap_node.js:508:3 code: 'BAD_BUNDLE_TRANSFORMER', plugin: 'uglify' }
Error transforming bundle with 'uglify' plugin: Unexpected token: punc (()
error Command failed with exit code 1.

My project here: https://github.com/ROYL-Design/vue-one-size

// bili.config.js
module.exports = {
  js: 'buble', // default
  // or custom
  js: 'typescript', // then bili will auto-load rollup-plugin-typescript in cwd
  typescript: {} // custom options for that compiler
}

I'm running bili src/DataTable.vue with the bili.config.js file below.

const { name } = require('./package')

module.exports = {
  name,
  banner: true,
  format: ['umd', 'umd-min', 'cjs', 'es'],
  plugins: ['vue'],
  vue: {
    css: `dist/vue-data-tablee.css`
  }
}

That's the component I'm trying to build with Bili 1.5.x on the branch I'm working on it.
https://github.com/VitorLuizC/vue-data-tablee/tree/fixture/upgrade-dependencies