Create npm dependencies from zero, just execute one command

origin

I've been working on new npm dependencies recently, but I found that nothing isCreate a project from scratchIt's a bittrouble, and then I looked for the dependencies I developed before and deleted the redundant code as the initialization project. So why not make onestencil, only need toInitialize templateThat's it, so I have this template. For convenience, I'm alsoPosted to npmOn, just needSimple execution of commandsYou can initialize npm-dependent development projects.

characteristic

🚀 Quickly create: One line of commands can create a complete TypeScript NPM library project
💪 TypeScript: Built-in TypeScript support and type declaration generation
📦 Multi-format output: Supports CommonJS, ES Module, UMD and IIFE formats
🎨 CSS/SCSS support: Style files can be packaged into JS or extracted as separate files
🧪 Test environment: Built-in and browser testing environment
🔄 Flexible configuration: Modular and easy to customize build configuration

Start quickly

No installation required, run directly:

# Use npx (recommended)
 npx create-ts-npm my-lib

 # or use npm init
 npm init ts-npm my-lib

 # or use yarn create
 yarn create ts-npm my-lib

Then follow the prompts to enter the package name, description, and author information.

Manual installation

If you need to use it multiple times, you can also choose to install it globally:

# Global installation
 npm install -g create-ts-npm

 # Then use
 create-ts-npm my-lib

Generated project content

The generated project contains the following:

.
 ├── src/ # Source code directory
 │ ├── # Main entrance file
 │ └── styles/ # style file
 ├── build/ # build configuration
 ├── dist/ # Package output directory (generated after construction)
 ├── types/ # type declaration file (generated after construction)
 ├── test-project/ # test project
 ├── # TypeScript configuration
 └── # Rollup configuration

Generated project build configuration instructions

This template adopts a modular build configuration, and the main configuration files have been split intobuild/In the directory, it makes the configuration clearer and easier to maintain.

Configuration file structure

: Main configuration file entry point, usually does not need to be modified
build/: Centrally manage all configurable options,Modify this file to customize the configuration
build/: Functions that create Rollup configuration object
build/plugins/: Directory containing various plug-in configurations

Main configuration items

To customize the build configuration, just editbuild/Options in the file:

// The output format to be generated can be added or deleted as needed
 // Optional values: 'cjs', 'es', 'umd', 'iife'
 exports.OUTPUT_FORMATS = ['cjs', 'es'];

 // Whether to generate a type declaration file
 exports.GENERATE_TYPES = true;

 // Global variable name in UMD/IIFE format
 exports.GLOBAL_NAME = (/-([a-z])/g, (_, letter) => ());

 // External dependencies, these dependencies will not be packaged
  = [];

 // Entry file path
 exports.INPUT_FILE = './src/';

 // CSS/SCSS configuration
 exports.CSS_CONFIG = {
     // Whether to enable CSS/SCSS processing
     enabled: true,
     // Whether to extract CSS as a separate file, false means injected into JS
     extract: false,
     // Whether to compress CSS
     minimize: true,
     // CSS modularity, setting true will convert the class name to hash value to avoid style conflicts
     modules: false,
     // Whether to use Sass preprocessor
     sass: true,
     // Automatically add browser prefix
     autoPrefix: true,
     // Extracted CSS file name
     fileName: ''
 };

Output format and applicable scenarios

Format	File extension	Applicable scenarios	Global variables
CJS (CommonJS)	`.js`	Packaging tools such as environment, webpack	not applicable
ESM (ES Module)	`.mjs`	Modern browser, packaging tool that supports ES modules, and tree-shaking	not applicable
UMD (Universal)	`.`	Universal format, both AMD and browser support	Need to define
IIFE (self-execution function)	`.`	Use directly in the browser via script tags	Need to define

Common configuration examples

Add UMD and IIFE formats:

// build/
exports.OUTPUT_FORMATS = ['cjs', 'es', 'umd', 'iife'];

Configure external dependencies:

// build/
 = ['lodash', 'react', 'react-dom'];

Extract CSS as a separate file:

// build/
exports.CSS_CONFIG.extract = true;
exports.CSS_CONFIG.fileName = '';

Enable CSS modularity:

// build/
exports.CSS_CONFIG.modules = true;

Disable TypeScript type declaration generation:
```
// build/
exports.GENERATE_TYPES = false;
```

Using CSS/SCSS in a project

To use CSS or SCSS files in your project, just import them in the TypeScript file:

// Import CSS files
 import './styles/';

 // Import SCSS files
 import './styles/';

If CSS modularity is enabled (CSS_CONFIG.modules = true), you can import and use it like this:

// Import CSS module
 import styles from './styles/';

 // Use CSS class
  = ;

Use the generated project

After generating the project, you can:

# Installation dependencies
 cd my-lib
 npm install

 # Development model (built and test in)
 npm run dev

 # Test in the browser
 npm run test:browser

 # Build a production version
 npm run build:pro

 # Publish to NPM
 npm run toPublish

See gitee for more instructions:/jl15988/npm-dependent-template