Todo: Unfinished README file

JS Package Template (basic)

Boilerplate and playground/sandbox for creating a simple/basic javascript package.

It is also a playground or sandbox to test packages concepts, directory structure, organize src/dist/demos/docs, etc...

📝 IMPORTANT NOTE:

• Above is the target structure.
• The repository doesn't reflect the structure at 100%. Files and directories can be added or removed as needed or not needed.
• JS/CSS examples are included to quickly test the project or understand what the scripts are doing.
• NPM INSTALLATION should be done only to test the result and understand package.json export. You should DOWNLOAD the project from GITHUB to get the prepeared workspace.

The global idea

A package:

• only essentials for basic projects
• relies on minimal dev dependencies
• helps to structure the workflow
• No webpack, grunt, test driven logics, etc...
• Dev packages and npm scripts can be added/tweeked/removed depeding on project

Contribution & Feedback

Any feedback is welcome on : https://github.com/adil-azmy/js-package-template-basic/discussions

• any idea is welcome on github,
• maybe a better package to replace used ones,
• or a reliable lts packages with minimal dependecies doing same jobs on scripts
• or somethings else...

Packages and why

eslint > Lint JS files. Especially if there is multiple contributors and we want to verify contributed sources.

@eslint/create-config> Assistant to configure EsLint depending on current project requirements

postcss > Auto Prefix some css with vendor (browser) prefix if needed.

postcss-cli > CLI for postcss to use npm commands

autoprefixer > postcss extension to autoprefix

sass > Complile and compress SASS/CSS

terser > JavaScript mangler/compressor toolkit (used to minify)

npm-run-all > Run synch/asynch npm commands and Cross platform (win, linux, macos, etc...). the & and && are a mess between platforms.

Directory Structure

package/
|- .git/
|- build-tools/
|- demos/
|   |- assets/
|   |- demo-1/
|   |   |- assets/
|- dist/
|   |- css/
|   |- js/
|- docs/
|   |- assets/
|- node_modules/
|- src/
|   |- css/
|   |   |- vendor/
|   |   |- style.scss
|   |- js/
|   |   |- vendor/
|   |   |- MyClass.js
|   |   |- plugin.js
|- .gitignore
|- package-lock.json
|- package.json
|- README.md
|- LICENSE.md
|- SECURITY.md

/dist

• Direct usable files by a browser or an app
• Can contain:
  • Compliled SCSS to CSS
  • JS Plugin, JS Module, JS Script file
  • Minified and unminified versions

/demos

• Uses files from /dist

/demos/assets

• Global assets

/demos/demo-1/assets

• Specific demo-1 assets

Naming

Other devs, javascript experts or not, should be able to know what a file contains just from its name.

Class

| Type| Name | Filename | |-|-|-| | Class | MyProfileClass | my-profile-class.js | | Module| MyAuthModule | my-auth-module.js | | Functions or Scripts | (none) | my-on-load-script.js |

Bulk info

• Block comments starting with /*! will be kept after minification

Todo

• [ ] Bulk change author @author, github link @see, and version @version, license @license, etc... on files.
• [ ] Complete README.md
• [ ] Add doc example

More about some packages

Todo: unfinished

ESlint

If the current project is different than what is marked under, the configuration assistant can be restarted with

$ npm init @eslint/config

The current project answers are:

# Follow the 
√ How would you like to use ESLint? · detect problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JSON