background

I spent some time doing a bit of front end toolset, summarizing the problems I encountered in the process, reviewing the old and learning the new… A word summarizing the mood of the words: with a big knife cut a pencil.

The target

Two invocation methods are implemented

import outils from '@zhisland/outils'; // ES6
<script src="./outils.min.js"></script> // A reference to a file that runs directlyCopy the code

start

Tool selection

  • Webpack packaging
  • JEST test
  • Generate comment documents using JSDoc
  • Optimize code formatting with ESLint
  • Babel compilation

Project Directory Description

Outils | - lib / / the source file directory | | - index. The js / / entry file | | - *. Js / / other relevant documents | - dist / / generated file directory, Modules reference file | - doc / / jsdoc generated documentation, click index. The HTML can be used local view | - scripts / / script file and related configuration | -- static / / index. HTML page | - local debuggingtest// Test caseCopy the code

Problem 1 (NPM introduces webpack to pack an empty object)

Cause: The package outils.min.js is expected to comply with the CommonJS specification, but it is not specified in the configuration, so the webpack package does not export anything. The libraryTarget is the key. By setting this property, we can let WebPack know which specification to use to export a variable. When your libraryTarget is Commonjs2, your bundle ends up exporting the entire bundle module as module.exports. This is mostly done in node and is OK with AMD.

Finally, the script and some test cases run by the project


test

Question 2

  • The packaged documents are not easy to read
  • Let outils = require(‘@zhisland/outils’).default; Reason: Webpack itself implements a set of __webpack_exports__ webpack_require module mechanism which wraps each JS file in a function, implementing reference and export between modules.

Rollup replaces the WebPack library

Rollup is a JavaScript module wrapper that compiles small pieces of code into large, complex pieces of code, such as libraries or applications.

What I like about Rollup is that it’s easy to configure, does one thing, can be extended with plug-ins, and can work with Gulp to create automated front-end workflows

Some functions must not be discarded

  • Pageg. json file cannot be read directly like Webpack, additional rollup-plugin-json installation is required
  • You can’t import files dynamically using require.context, you can only import files statically as well as some other useful features that WebPack includes

Question 3 (.babalrc file)

{
  "presets": [["es2015", {
        "modules": false}}]]Copy the code

The reason: Modules :false is used because rollup resolves dependencies between files using ES6 module syntax by default. Rollup does not support parsing common. Js module specifications by default. So you need Babel to not convert module-specific syntax, otherwise rollup will report errors when used

Bable configuration incompatible with JEST and rollup

Problem description: JEST tests can resolve ES6 module references with latest in the default, but rollup packages an error solution: set the Babel environment variable

Release:

$ npm run beforePublish 

$ npm login
npm publish
Copy the code

Updates continue at….