Convention is larger than configuration
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.
$ npm i -g pillar-packCreate 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.jsonset 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 publicThe project is start:
- If no have
babel-*packages, auto installbabel-*packages - create
.babelrc, .postcssrcfile, and add config in it. support css, less, scss - Source file from
src/index.jsorsrc/index.ts - Bundle put out dir to
build - Copy
publicdir to out dir - Replace in
public/index.htmlstring ofbundle-rename.jsto real bundle.js - Use
brower-syncstart server, and replaceparcel-hmrreload page - Use system brower open page
-- public
- index.html
-- src
- index.js
-- package.jsonIf your project is defalut React project frame (above paragraphs), your can just use this:
$ pillar-packUsually, you don't need to continue reading,unless you need to custommize some special configurations.
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 listInstall package
$ pillar-pack initchange source .js and server port
$ pillar-pack -s src/app.js --port 4100Other 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent