Above is the package.json file for vue.

In addition to vue, React, Ember, Preact, D3, three.js, Moment, etc. Some of the most popular JS libraries use Rollup as a packaging tool, so Rollup certainly has its advantages. In addition to the rollup and, of course, some familiar packaging automation tools, such as webpack, gulp, grunt, lerna, this article we’ll take a look at their differences, so as not to book when you use knowledge, you will find you to! It also helps us to use the right tools when building the project, and of course it will help you get twice the result with half the effort

Rollup

Rollup is the next generation of ES6 modularization tools that leverage ES6 module design to generate cleaner, simpler code. Rollup is better for building javascript libraries.

A rollup advantage

  • Automatic tree-shaking (tree-shaking, also known as “live code inclusion,” is the process of removing code that is not actually used in a given project, but it can be more efficient.)
  • Fast packing speed
  • Configuration is simple

Use a rollup

NPM install rollup uses the configuration file rollup.config.jsexport default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'}};Copy the code

Run rollup -c rollup.config.js

Input: the entry point to this package (for example, your main.js or app.js or index.js) File: the file to write to. Can also be used to generate sourcemaps if format is applicable: Rollup provides five options regarding the format option: * AMD -- asynchronous module definition for module loaders like RequireJS * CJS -- CommonJS, Works with Node and Browserify/Webpack * es - saves packages as ES module files * iife - an auto-executed feature suitable as <script> tags. (If you're creating a bundle for your application, you might want to use it because it makes the file size smaller.) * UMD -- Common module definition, combining AMD, CJS and IIFECopy the code

To learn more about modules, go to my first article to read the vUE source code and look at front-end 100 State 1- modularity

Rollup base plugin

Rollup-plugin-alias: provides modules namesaliasRollup-plugin-babel: provides the Babel capability rollup-plugin-eslint: provides the ESLint capability rollup-plugin-node-resolve: Rollup-plugin-commonjs: convert CJS -> ESM, usually with one of the above plug-ins using rollup-plugin-serve: Rollup-plugin-filesize: displays the bundle size rollup-plugin-uglify: displays the bundle size rollup-plugin-uglify: Rollup-plugin-replace: Analogous to Webpack DefinePlugin, process.env.node_env can be used in source code to build environments that distinguish Development from Production.Copy the code

Learn more rollup tool: www.rollupjs.com/guide/zh

Webpack

Webpack is positioned as a module packer, and Rollup does not support certain advanced features, especially when building applications, especially code splitting and dynamic imports at Runtime. If you need these features in your project, using WebPack is more appropriate. Segmentfault.com/img/bVVVqL?…

Webpack takes the project as a whole, and with a given main file, WebPack will start from that file to find all of your project’s dependent files, process them with loaders, and finally package them into one or more browser-aware JS files

Webpack advantage

  • webpackBased oncommonJSThe form to write script drops, but rightAMD/CMDSupport is also comprehensive, facilitating code migration for older projects
  • All static resources can be referenced as modules, not justJSthe
  • Easy to develop, can replace partgrunt/gulpWork, such as packaging, compression obfuscation, image transferbase64Etc.
  • Strong expansibility, perfect plug-in mechanism (asynchronous loading, separate packaging)

Webpack use

Because webpack function is very powerful, to learn more: webpack.docschina.org/concepts if I wanted to build yourself a webpack project can follow segmentfault.com/a/119000001… To learn! I won’t introduce it here

Configuration file for WebPack

The configuration file (webpack.config.js) must be configured under each project with a webpack.config.js entry page entry file configuration, which will be the root output of the entire dependency Loaders 1. Implements processing of files in different formats, such as converting SCSS to CSS or typescript to JS. 2. Loader is one of the most important parts of Webpack. By using different Loaders, we can call external scripts or tools to realize the processing of files in different formats. Loader needs to configure plugins with modules in webpack.config.js,loaders are responsible for processing source files such as CSS and JSX, one at a time. Whereas plugins do not operate directly on individual files, they contribute directly to the entire build process. Alias project migration is easier. Externals use scenarios where external dependencies do not need to be bundledCopy the code

lerna

A way to manage multiple Packages javascript projects.

  • Automatically resolve dependencies between packages
  • Git detects file changes and releases them automatically
  • Based on git submission records, CHANGELOG is automatically generated

Lerna use

NPM install lerna -g install lerna -gcd- packages - lerna.json - package.json 3. Add the test Package packagecd packages/
mkdir modulea
cdModulea/NPM init -y file directory: --packages --modulea package.json --lerna.json --package.json Add dependencies for package.json in moduleA: {"name": "modulea"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"."dependencies": {
    "vue": "^ 2.6.6"}} 5. Return to the home directory: Run lerna Bootstrap to find that the vUE dependencies in ModuleA have been installed. Connected to the git repository for making (for example) making new warehouse (according to making tutorials) to connect to a remote local (git remote add origin https://github.com/Wendydesigner/lerna.git). Git add. Git commit -m"first commit"git rebase origin/master git push origin master 7. Add publish {to lerna.json"packages": [
    "packages/*"]."version": "0.0.0"."command": {
    "publish": {
      "message": "chore(release): publish %v"Lerna. json is the same as the version in package.json for moduleA. And the project will record each released tag; Update code and commit remote, can continue lerna publishCopy the code

This is the simplest lerna workflow. But lerna has many more features to discover. Lerna has two working modes,Independent mode and Fixed/Locked mode. The default mode of LERNA is Fixed/Locked mode. In this mode, LERNA actually treats the project as a whole. Each release of Packges is a full release, with or without modifications. However, in Independent Mode, Lerna will cooperate with Git to check file changes and only release packge with changes.

Lerna Best practices

To get the most out of LERNA, here are some features.

  • Adopt Independent mode
  • Changelog is automatically generated based on Git submission information
  • Eslint rule checking
  • Prettier automatically formats code
  • Submit the code, the code checks the hook
  • Follow the Semver version specification

The most important element in the process of developing this kind of engineering is the specification.

gulp

Gulp is a “flow” based automated build tool with a code over configuration strategy that is easier to learn and use. Webpack is positioned as a module packer, while Gulp/Grunt is a build tool. Webpack can replace some of the features of Gulp/Grunt, but is not a functional tool and can be used in conjunction with it

grunt

Grunt is a set of front-end automation tools that help with repetitive tasks. Generally used for: compilation, compression, merging files, simple syntax check, etc

Since WebPack and its plug-ins implement many of the basic features of Gulp/Grunt, most projects tend to use Webpack, and Gulp/Grunt is shunned.

To sum up, each tool mentioned has its best implementation, and finding the best one is the best