motivation

Many people want to write their own wheel, but there are always some problems when you get started

  • How should a basic JS library be written
  • What files are required for basic front-end projects
  • How to package and publish to NPM
  • How can your ES6 syntax be recognized by others
  • How should a READme be written
  • How do I add ESLint
  • How do I package a UMD file for HTML reference

To this end, I made a set of templates for quickly building JavaScript project libraries and did the basic configuration.

The directory is as follows:

. ├ ─ ─ the buildPackage the project file directory| ├ ─ ─ your - js - lib. Min. Js# Compressed JS project library file| └ ─ ─ your - js - lib. Min. Js. The map# the map file├ ─ ─ node_modules# node_modules| └ ─ ─...# Dependency components├ ─ ─ the SRC# SRC directory| ├ ─ ─ the coreSource component directory| └ ─ ─ index. Js# import file├ ─ ─ babelrc# Babel configuration file├ ─ ─ gitignore# git ignores commits├ ─ ─ npmignore# NPM publish ignore commit├ ─ ─ eslintrc. Json# eslin configuration and rule description├ ─ ─ LICENSE# LICENSE├ ─ ─ package. JsonPackage dependency management file├ ─ ─ the README, md# Project instructions document└ ─ ─ a rollup. Config. JsRollup package tool configuration file
Copy the code

The development of

During development work, we usually create project files or directories in the SRC directory according to our own needs, and export them in the following two steps.

step1

// `src/core/`
export default a or export {a, b}
Copy the code

step2

// `src/index.js
import YourJsLib from "./core/YourJsLib";
export default YourJsLib;
Copy the code

es6 lint

npm run lint
Copy the code

packaging

npm run build
Copy the code

use

Reference directly on the page

<script src="js/your-js-lib.min.js"></script>
Copy the code

Or install using npm

npm install your-js-lib --save
...

import YourJsLib from 'your-js-lib';
Copy the code

PS

  • You will need to install the ESLint plug-in for your development tools
  • The distribution of the NPM package needs to be created by the project name itself

Project reference address :(welcome everyone star, provide issues, constantly improve the warehouse.)

YourJsLib