Front end scaffolding

In essence, this is an integrated Webpack scaffolding. Today on the network, I believe that the configuration of Webpack, we also see a lot, basically more popular framework we are recommended to use Webpack to develop deployment. Vue-cli tools in front, and ant-design after, we basically help us to configure the webpack that some of the configuration.

However, there are problems with webPack information content embedded in the project. As a result, development loads require NPM install for a long time, every project needs to install all the Webpacks, and a lot of Loader dependencies. The biggest function of my scaffold is the global installation of the system, which can almost develop and deploy all online mainstream projects. All projects only need to load their own JS dependencies, do a machine installation, support all front-end projects.

Actually, this scaffolding, we’ve been using it for a year. The real feeling is – it’s great ~~ but because I haven’t had much time, I haven’t promoted it.

After the year, finally have a trace of time, can be happy to share with you.

Hey – cli

In fact, hey-CLI is our main product in the Hey family, of course, the main component library like Heyui. As for the introduction of hey-CLI, I think it’s not enough to just say so, so I spent some time putting together the Hey-cli-template, which has some major templates, which I will introduce in more detail later. First, I’ll post some links to the Hey-cli: github: github.com/heyui/hey-c… NPM: www.npmjs.com/package/hey…

The document

Click here

The installation

npm install -g hey-cli
Copy the code
# development
hey dev
# deployment
hey build
Install template
hey init <project-name>
Simple, Vue, Heyui, elementui, iView, React (ant-design)
Copy the code

Template description

Why not start with the template instead of the function, because this is the best way to illustrate the function of the scaffold. First you need to install hey-CLI globally.

npm install -g hey-cli

# new version npm
sudo npm install -g hey-cli --unsafe-perm=true --allow-root
Copy the code

Because the scaffolding has not been promoted yet, there is no compatible version detection for Node, but the mainstream stable version is generally ok, and there are some problems with the older version. If anyone installation problems, please timely feedback, thank you very much.

There are two ways to try it. One is to install some of your favorite templates using the hey init command. And there’s a git clone https://github.com/heyui/hey-cli-template, if you want to try all of the project, can be quicker.

simple

For simple projects, HTML automatically references JS and CSS files, and the hash suffix is automatically added at deployment time. Support for ES6. Dependency package: None

cd simple
hey dev
Copy the code

vue

Vue’s Simple-Webpack project. But without a bunch of webPack dependencies. Dependency package: vue

cd vue
npm install
hey dev
Copy the code

heyui

Our flagship product, the form case was copied directly from the demo on the official website. It uses a hey-CLI feature: globalVars: ‘./ SRC/CSS /var.less’. This configuration allows you to use these global variables in all less files, including 

cd heyui
Install two dependency packages
npm install
hey dev
Copy the code

elementui

I copied some of the demos from the Element website. Dependency packages: vue, element-UI

cd elementui
Install two dependency packages
npm install
hey dev
Copy the code

iviewui

Dependent packages: vue, iView

cd iviewui
Install two dependency packages
npm install
hey dev
Copy the code

react

React actually uses the Ant Design project as an example, using the first demo in the getting started document. React You need to add the react: true configuration item to hey.conf.js. Dependencies: react, moment, antd, react-dom

cd react
npm install
hey dev
Copy the code

Ok, these projects are introduced, what kind of projects you want to develop in the future, simple to do.

function

As for the other features, WebPack has almost all of them. General projects need to integrate are added, these will see the feedback, I want to understand the tutorial good.

The public,

Today’s newly opened public account, I hope you pay more attention to. Maybe you’ll be our first member.