In this section we will continue to implement the start and init directives;

startinstruction

The start directive, used to start a project, works by starting a service locally based on webpackDevServer.

webpackconfiguration

Start by configuring the entry file SRC /index.js

import start from './commanders/start.js'. program .command('start')
    .description('start a program')
    .action(() = > {
        start(config)
    })
...
Copy the code

src/commanders/start.js

import Webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import path from 'path'
import getDevConfig from '.. /webpack/config.dev.js'
export default (config) => {
  const { port = 8000, cwd } = config
  const host = '0.0.0.0'
  const webpackConfig = getDevConfig(config)
  const devServer = {
    port,
    host,
    open: true.compress: true.static: {
      directory: path.join(cwd, 'dist'),}}const complier = Webpack(webpackConfig)
  const server = new WebpackDevServer(complier, devServer)

  server.listen(port, host, () = > {
    console.log(`start server on http://localhost:${port}`)})}Copy the code

src/webpack/config.dev.js

import commonConfig from './config.com.js'

export default (pkg) => {
  return {
    mode: 'development'.// Set the development mode. commonConfig(pkg)// Common configuration for each mode}}Copy the code

The configuration template

For a front-end project, an HTML template is required to open in the browser. Webpack provides a plug-in HtmlWebpackPlugin, which can automatically generate a template and introduce all the JS files generated by packaging in the template.

Configure the SRC/Babel/plugin. Js

import HtmlWebpackPlugin from 'html-webpack-plugin'.export default() = > {return[...new HtmlWebpackPlugin(),    // Automatically generate HTML templates and import all js files generated by packaging]}Copy the code

You are ready to start the project locally.

test

Modify the demo/index.js file

 document.body.innerHTML = '<div>demo</div>'
Copy the code

Run the simple-cli start command in the demo directory. A web page will automatically open, showing the demo file.

initinstruction

As a complete scaffold tool, the init directive is just as important as start and build. Its main purpose is to copy the built-in templates to the user directory.

A new template

Create a react template directory cli/templates/react: by default, there are two files in this directory: index.js and package.json index.js:

import React from 'react'
import { render } from 'react-dom'

render(
  <div className="container">
    <div>this is a react app</div>
  </div>.document.getElementById('root'),Copy the code

package.json:

{
  "name": "demo"."version": "1.0.0"."description": "a simple-cli init demo"."scripts": {
    "start": "simple-cli start"."build": "simple-cli build"
  },
  "creator": ""."license": "ISC"."simple-cli": {
    "port": 9000."entry": "./index"
  },
  "dependencies": {
    "react": "^ 16.9.0"."react-dom": "^ 16.9.0"}}Copy the code

So far, our project has not been able to parse JSX syntax, so we update SRC/Babel /jsloader.js

. {"test": /\.(m? js|jsx)$/."exclude": /(node_modules|bower_components)/."use": {
      loader: require.resolve('babel-loader'),     // require.resolve is important to look for the corresponding module in node_modules of the current project
      options: {
        presets: [
          require.resolve('@babel/preset-env'),
          require.resolve('@babel/preset-react')     / / support to react]}}}Copy the code

In the same way, you can configure other loaders to support less,stylus, CSS, files, images, etc. You can see the source code at the end of this article.

At this point, any new directory is created, and the following commands are executed in this directory:

simple-init
npm install
simple-start
Copy the code

A project will be launched and a default page will be opened.

conclusion

At this point, the basic functions of our scaffolding have been realized. These include init,start, and build directives. Can meet the daily needs, in the production environment, can be combined with the company’s technology stack, do the corresponding expansion.

Start from scratch a front-end scaffolding (a) start from scratch a front-end scaffolding (two) start from scratch a front-end scaffolding (four)