Pillar-pack NPM

Real `Zero config` package tool

Based on `Brower-sync` and `Parcel`

Convention is larger than configuration

中文文档

Why use this?

In React Project, Parcel need install babel-* packages, and need config .babelrc. And sometimes Hot Reload fail. Parcel native don't have copy assets feature. So, we have this package. It's juset over parcel, wrapped up in a layer candy.

Install

$ npm i -g pillar-pack

Create a `React` project from zero

Create project

$ mkdir your-project
$ cd your-project
$ npm init -y
$ mkdir public src
$ touch public/index.html src/index.js
$ yarn add react react-dom

Now, your project frame like this, it's a defalut React project frame

-- public
  - index.html
-- src
  - index.js
-- package.json

set public/index.html

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

<body>
  <div id="root"></div>
  <script src="bundle-rename.js"></script>
</body>

</html>

set src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    num: 0,
  };
  addNum = () => {
    this.setState({ num: this.state.num + 1 });
  };
  render() {
    return (
      <div>
        <h1>Hello pillar-pack</h1>
        <h2>{this.state.num}</h2>
        <button onClick={this.addNum}>Add Num</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Start:

$ pillar-pack -s src/index.js -o build -c public

The project is start:

npm.io

That's all you have to do, they are do this:

If no have babel-* packages, auto install babel-* packages
create .babelrc, .postcssrc file, and add config in it. support css, less, scss
Source file from src/index.js or src/index.ts
Bundle put out dir to build
Copy public dir to out dir
Replace in public/index.html string of bundle-rename.js to real bundle.js
Use brower-sync start server, and replace parcel-hmr reload page
Use system brower open page

Default project frame

-- public
  - index.html
-- src
  - index.js
-- package.json

If your project is defalut React project frame (above paragraphs), your can just use this:

$ pillar-pack

Usually, you don't need to continue reading,unless you need to custommize some special configurations.

Custom configuration

You can add params to change config:

-s : source file
-o : set out dir
-c, --copy : set copy dir to outDir, defalut ./public
init : Install babel-* in your project
--dll : only pack js to one dll.js
--prod : use prod mode, only build
--cors : is use brower cors
--open : is open brower
--no-reload : set brower-sync no reload
--hmr : open hmr, defalut close
--html : set dev server html, default public/index.html
--rename : change fix bundleName, defalut bundle-rename.js
--no-copy : no copy public dir
--scss : install scss package
--cover-babel : set cover babel file
--no-babel : set no create .babelrc
--source-map : true | false, defalut true
--server : only use server
--version : cat version
--help : help list
--help-cn : Chinese help list

Example

Install package

$ pillar-pack init

change source .js and server port

$ pillar-pack -s src/app.js --port 4100

Other custom example:

Use source file in lib/index.js
Copy lib/assets
Bundle out to build-prod
Change index.prod.html
Don't use sourceMap

$ pillar-pack \
  -s lib/index.js \
  -c lib/assets  \
  -o build-prod \
  --html index.prod.html \
  --source-map false \
  --prod

browser-sync parcel-bundler fs-extra

@infinitebrahmanuniverse/nolb-pil @everything-registry/sub-chunk-2437

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

Real Zero config package tool

Based on Brower-sync and Parcel

中文文档

Why use this?

Install

Create a React project from zero

That's all you have to do, they are do this:

Default project frame

Custom configuration

Example

Real `Zero config` package tool

Based on `Brower-sync` and `Parcel`

Create a `React` project from zero