Last active
March 30, 2022 16:40
-
-
Save carsonfarmer/7b81f29ef0981a03899f75a28d592177 to your computer and use it in GitHub Desktop.
NPM module setup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Initialize npm module | |
npm init | |
# Install eslint | |
npm i -D eslint | |
# Initialize eslint | |
npx eslint --init | |
# To check syntax, find problems, and enforce code style | |
# JavaScript modules (import/export) | |
# None of these | |
# No | |
# Where does your code run? <a> to toggle all | |
# Use a popular style guide | |
# Standard: https://github.com/standard/standard | |
# JavaScript | |
# Yes | |
# Additional eslint plugins | |
npm i -D prettier eslint-plugin-prettier eslint-config-prettier | |
# If using Typescript | |
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser ts-node typescript | |
# eslint settings (.eslintrc.js) | |
module.exports = { | |
env: { | |
browser: true, | |
es2020: true, | |
}, | |
ignorePatterns: ["node_modules", "dist"], | |
extends: [ | |
"standard", | |
"plugin:prettier/recommended", | |
"plugin:node/recommended" | |
], | |
parserOptions: { | |
ecmaVersion: 11, | |
sourceType: "module", | |
}, | |
plugins: ["prettier"], | |
rules: { | |
"prettier/prettier": "error", | |
}, | |
}; | |
# If using Tyepscript add | |
# ... | |
extends: [ | |
"plugin:@typescript-eslint/recommended", | |
"prettier/@typescript-eslint", | |
"plugin:prettier/recommended", | |
], | |
plugins: ["@typescript-eslint", "prettier"], | |
# ... | |
# While we're at it, a good default tsconfig is: | |
{ | |
"compilerOptions": { | |
"target": "ES6", | |
"module": "ES6", | |
"lib": ["DOM", "ES6"], | |
"declaration": false, | |
"rootDir": "./src", | |
"strict": true, | |
"moduleResolution": "node", | |
"esModuleInterop": true, | |
"skipLibCheck": true, | |
"forceConsistentCasingInFileNames": true | |
}, | |
"exclude": ["dist", "node_modules"] | |
} | |
# Update package.json scripts | |
# ... | |
"lint": "eslint", | |
# ... | |
# Initialize git | |
git init | |
# https://docs.gitignore.io/install/command-line | |
gi code,node >> .gitignore | |
# Install testing libraries | |
npm i -D mocha polendina assert | |
# If using Typescript add | |
npm i -D @types/mocha @types/node | |
# Update package.json scripts | |
# ... | |
"test": "mocha --exit src/**/*.spec.js", | |
# ... | |
# If using Typescript add | |
# ... | |
"test": "env TS_NODE_FILES=true TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha", | |
# ... | |
# And then update package.json: | |
# ... | |
"mocha": { | |
"spec": "**/*.spec.ts", | |
"reporter": "spec", | |
"recursive": true, | |
"require": [ | |
"ts-node/register" | |
], | |
"exit": true, | |
"esmLoader": true | |
} | |
# ... | |
# Add rollup support | |
npm i -D rollup | |
# If using Typescript add | |
npm i -D @rollup/plugin-typescript tslib | |
# Update package.json scripts | |
# ... | |
"build": "rollup -c" | |
# ... | |
# Create rollup.config.js | |
import json from "@rollup/plugin-json"; | |
import pkg from "./package.json"; | |
export default { | |
input: pkg.module, | |
output: { | |
file: pkg.main, | |
format: "cjs", | |
}, | |
external: [...Object.keys(pkg.dependencies)], | |
plugins: [json()], | |
}; | |
# If using Typescript, a good example follows. | |
# Make sure declarations: false in your tsconfig | |
import typescript from "@rollup/plugin-typescript"; | |
import pkg from "./package.json"; | |
import path from "path"; | |
const defaults = { | |
input: "src/index.ts", | |
external: [...Object.keys(pkg.dependencies || {})], | |
plugins: [typescript()], | |
}; | |
const dir = path.dirname(pkg.module); | |
export default [ | |
{ | |
...defaults, | |
output: [ | |
{ file: pkg.main, format: "cjs" }, | |
{ | |
file: pkg.browser, | |
name: "ThreadDB", | |
format: "iife", | |
globals: { | |
dexie: "Dexie", | |
}, | |
}, | |
], | |
}, | |
{ | |
...defaults, | |
plugins: [ | |
typescript({ | |
declaration: true, | |
declarationDir: dir, | |
declarationMap: true, | |
}), | |
], | |
output: [{ dir, format: "es", sourcemap: true }], | |
}, | |
]; | |
# Maybe add esm for esm support? Or add "type": "module" to package.json | |
npm i esm | |
# Setup ESM/CJS entry-points in package.json | |
# ... | |
main": "dist/index.cjs", | |
"module": "index.js", | |
"exports": { | |
".": { | |
"import": "./index.js", | |
"require": "./dist/index.cjs" | |
}, | |
"./index.js": { | |
"import": "./index.js", | |
"require": "./dist/index.cjs" | |
} | |
}, | |
# ... | |
# Add support for commit linting and semver releases | |
npm i -D @commitlint/cli @commitlint/config-conventional husky standard-version | |
# Update package.json | |
# ... | |
"commitlint": { | |
"extends": [ | |
"@commitlint/config-conventional" | |
] | |
}, | |
"husky": { | |
"hooks": { | |
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS" | |
} | |
} | |
# ... | |
# Update package.json scripts | |
# ... | |
"version": "standard-version" | |
# ... | |
# Create main entry-point(s) | |
touch index.js | |
mkdir src | |
# Settings for mocha test explorer in VSCode | |
# Typescript version: | |
{ | |
"typescript.tsdk": "node_modules/typescript/lib", | |
"mochaExplorer.files": "**/*.spec.ts", | |
"mochaExplorer.esmLoader": true, | |
"mochaExplorer.exit": true, | |
"mochaExplorer.require": ["ts-node/register", "source-map-support/register"], | |
"mochaExplorer.env": { | |
"TS_NODE_FILES": "true", | |
"TS_NODE_COMPILER_OPTIONS": "{\"module\": \"commonjs\" }" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment