This is the 13th day of my participation in Gwen Challenge

Lynne, a front-end development engineer who can cry, love and laugh forever. In the Internet wave, love life and technology.

preface

During actual development, when you’re definitely running code and looking at pages, it’s important to have a local server so you can debug the code.

Distinguish between development and production environments

In the development environment we need sourcemap on, configure hot update and local service, in the production environment we need Sourcemap off, do not need hot update and local service, need code compression, etc., so we need to distinguish.

Split roullup.config.dev.js and rollup.config.prod.js

Rollup.config. js is split into two rollup.config.dev.js and rollup.config.build.js

Change the package name in package.json.

Also remember to update the reference file path in the rollup.config.js file!!

Configuration package. Json

Finally, configure naming in package.json (modified here to distinguish between development and production environments)

Configure a rollup. Config. Dev. Js

Local server + source-map + hot update

Two local server plug-ins

rollup-plugin-serve or rollup-plugin-dev

These two plug-ins compare:

  • Rollup-plugin-dev is implemented using the KOA server and has dependencies
  • Has additional functions that may be useful

Installing a plug-in

Start by installing a plug-in to start the local server

Install rollup-plugin-serve or rollup-plugin-dev

npm install rollup-plugin-serve --save-dev

or 

npm install rollup-plugin0dev --save-dev
Copy the code

Enabling Hot Update

Install the rollup-plugin-livereload plugin

npm install rollup-plugin-livereload --save-dev
Copy the code

Rollup-plugin-livereload () can be configured in the rollup.config.dev.js config plug-in in the development environment.

Configure a rollup. Config. Dev. Js

Configure sourcemap: true in the package output of rollup.config.dev.js to make debugging code easier.

import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import json from 'rollup-plugin-json'; import pkg from '.. /package.json'; // Reference file path to remember to change!! import livereload from 'rollup-plugin-livereload' import serve from 'rollup-plugin-serve' export default [ { input: pkg.main, output: [ { name: 'W', file: pkg.browser, format: 'umd', sourcemap: true, } ], plugins: [ resolve(), // so Rollup can find `ms` commonjs(), // so Rollup can convert `ms` to an ES module json(), // so Rollup can read file `.json` livereload(), serve({ open:true, port: 8082, contentBase: '' }) ] } ];Copy the code

Reference library

NPM run dev automatically opens the browser page by creating an index. HTML file in the root directory to reference the JS class library.

Configure a rollup. Config. Prod. Js

The above configuration is not required in the production environment, which mainly requires code compression and plug-in installation:


import { terser } from "rollup-plugin-terser";

Copy the code

The development environment configures plug-ins.

export default [
  {
    input: pkg.main,
    output: [
      {
        name: 'W',
        file: pkg.browser,
        format: 'umd'
      }
    ],
    plugins: [
        resolve(), // so Rollup can find `ms`
        commonjs(), // so Rollup can convert `ms` to an ES module
        json(), // so Rollup can read file `.json`
        terser() // so minify
    ]
    }
];
Copy the code

conclusion

Differentiating between production and development environments can help us develop better, especially when convenient development tools that enable native development in a development environment can improve development efficiency.