WEBPACK and ROLLUP build a front-end tool library

 

1. WEBPACK

• webpack provides a library for building and packaging different modular rules, but you only need to build the underlying architecture for development by yourself.
• vue-cli, based on webpack, the vue-cli scaffolding tool can quickly initialize a vue application, and it can also initialize a build library.

2. ROLLUP

• rollup is a JavaScript module bundler that compiles small chunks of code from an application or library into more complex functional code.
• Rollup can be seen in the construction and packaging of many popular front-end frameworks such as Vue and React.

ROLLUP and WEBPACK application scenarios

• The main function of webpack is to develop applications, and rollup is mainly aimed at the development of js libraries. If you want to develop js libraries, the cumbersome configuration of webpack and the size of the packaged files are not suitable. The source code built through webpack packaging Many module dependent codes other than utility functions have been added.
• rollup just transcodes business code into target js, which is small and light. rollup has algorithmic support for tree-shaking and ES6 modules of the code. If you just want to build a simple library, which is developed based on ES6 and its concise API, rollup is favored by more developers.

rollup family bucket

• rollup (tool library packaging build core package)

• rollup-plugin-livereload (rollup plugin, hot update, convenient for local debugger development)

• rollup-plugin-serve (rollup plugin, local service proxy, convenient for debugging tools in local html)

• rollup-plugin-terser (rollup plugin, code compression obfuscation)

• rollup-plugin-visualizer (rollup plugin, visualize and analyze Rollup bundle to see module occupancy)

• @rollup/plugin-babel (rollup plugin, babel plugin for rollup, ES6 to ES5)

• @rollup/plugin-commonjs (rollup plugin to transpile CommonJS modules to ES6 so they can be included in Rollup bundles)

• @rollup/plugin-json (rollup plugin, which converts .json files to ES6 modules)

• @rollup/plugin-node-resolve (rollup plugin which locates modules using the node-resolve algorithm for using third-party node_modules packages in node modules)

• @rollup/plugin-typescript (rollup plugin, support for typescript, convert typescript from tsc to js)

 

typescript-related

• typescript (using the ts development tool library)

• tslib (TypeScript runtime library, which contains all TypeScript helper functions)

• @typescript-eslint/eslint-plugin (TypeScript's eslint plugin, constraining ts writing specifications)

• @typescript-eslint/parser (ESLint parser that leverages the TypeScript ESTree to allow ESLint to instrument TypeScript source code)

 

document related

• typedoc (documentation generator for TypeScript projects)

• gulp (build documentation system with gulp)

• gulp-typedoc (Gulp plugin to execute TypeDoc tools)

• browser-sync (document system hot update)

Unit testing related

• jest (an elegant and concise JavaScript testing framework)

• @types/jest (type definitions for Jest)

• ts-jest (a Jest transpiler that supports source maps, allowing you to use Jest to test projects written in TypeScript)

• @babel/preset-typescript (Babel preset for TypeScript)

other dependencies

• eslint (code specification constraints)

• @babel/core (the babel parsing plugin that @rollup/plugin-babel depends on)

• @babel/plugin-transform-runtime (babel translation dependency)

• @babel/preset-env (babel translation dependency)

• chalk (console character style)

• rimraf (UNIX command rm -rf for node)

• cross-env (set node environment variables across platforms)

 

References

[1] rollup English documentation ( https://rollupjs.org/guide/en/#quick-start )

[2] rollup Chinese documentation ( https://rollupjs.org/guide/zh/#introduction )

[3] Rollup.js practical study notes ( https://chenshenhai.github.io/rollupjs-note/ )

[4] Use of Rollup packaging tool ( https://juejin.cn/post/6844904058394771470 )

[5] TypeScript, Rollup build tool library ( https://juejin.cn/post/6844904035309322254 )

[6] Use rollup.js to encapsulate the toolkit shared by each project ( https://juejin.cn/post/6993720790046736420 )

[7] How to develop a TypeScript-based tool library and automatically generate documentation ( https://juejin.cn/post/6844903881030238221 )

[8] An elegant and concise JavaScript testing framework ( https://jestjs.io/zh-Hans/ )