Npm:Module

lastmod 2025-02-14created 2022-04-0666 edits

Explains how to create modules in Npm, etc.

Frontend TypeScript Library Module Setup

• Webpack from scratch
• webpack tutorial Getting started with webpack
• [Recommended] Setting up an ES6 environment with Babel and Webpack ①
• [Recommended] Setting up an ES6 environment with Babel and Webpack ②
• Babel (Babel 7) basic usage

yarn instead of npm

npm install -g yarn

Then initialize the npm project:

mkdir demo-project
cd demo-project
yarn init -y

Install the Webpack bundler

yarn add -D webpack webpack-cli

See webpack basic setup, or generate a config file with webpack-cli:

yarn run webpack-cli init

The answers to the short prompts:

$ yarn run webpack-cli init
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'yarn add -D @webpack-cli/generators') (Y/n) y
? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? No
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? none
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: yarn
? Overwrite package.json? overwrite

When done, remove the unused dependency.

yarn remove @webpack-cli/generators

After updating dependencies, check that it builds correctly.

yarn
yarn build:dev
cat dist/main.js  ## check result

Install TypeScript

typescript will already have been installed in the previous step. If not, install it with yarn add -D typescript.

tsconfig.json will already have been created in the previous step. If not, create it yourself with yarn run tsc --init. Use the ES2021+ spec (just the latest: esnext). ¹ Edit the generated file for detailed settings.

The tsconfig.json currently in use is as follows:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "paths": {
      "*.ts": ["*"],
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules", "dist"]
}

Install the Babel transcompiler

• Install babel,
• add the @babel/preset-env preset, which easily enables transforms for ES2015+.
• Add babel-loader to integrate with webpack:
• Install @babel/preset-typescript to replace ts-loader.

yarn remove ts-loader
yarn add -D @babel/core @babel/preset-env @babel/preset-typescript babel-loader

Add babel-loader to webpack's rules: ²

module: {
  rules: [
      {
        test: /\.(js|ts|tsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-typescript',
            ],
          },
        },
      },
  ]
}

Install the prettier style checker

yarn add --dev prettier

Add style settings to package.json:

  "prettier": {
    "printWidth": 88,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "all",
    "bracketSpacing": false,
    "bracketSameLine": false,
    "arrowParens": "avoid",
    "htmlWhitespaceSensitivity": "ignore",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "lf"
  }

Add the ESLint linter

• Install eslint.
• Install eslint-webpack-plugin to work with webpack. (For reference, eslint-loader has been deprecated)
• Add typescript-eslint to also apply to typescript.
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
• Add eslint-config-prettier, which disables ESLint rules that conflict with prettier:
• Add eslint-plugin-prettier, which reports formatting errors detected by prettier as ESLint errors:

yarn add -D eslint eslint-webpack-plugin @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier

Add an eslint config. An easy way to create one:

yarn create @eslint/config

Answers to the prompts:

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · prompt
✔ What format do you want your config file to be in? · JSON
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · single
✔ What line endings do you use? · unix
✔ Do you require semicolons? · Yes
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No
Successfully created .eslintrc.json file in /home/your/Project/answer-dev/api
Done in 32.93s.

• The indentation along the way is determined automatically, so if you want to change it, you have to edit the file directly.
• @typescript-eslint/eslint-plugin and @typescript-eslint/parser are already installed, so do not install them.

Once the .eslintrc.json file is created, add it to the eslintConfig property of package.json.

  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "es2021": true,
      "node": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
    },
    "plugins": [
      "@typescript-eslint",
      "prettier"
    ],
    "rules": {
      "prettier/prettier": "error",
      "indent": [
        "error",
        2
      ],
      "linebreak-style": [
        "error",
        "unix"
      ],
      "quotes": [
        "error",
        "single"
      ],
      "semi": [
        "error",
        "always"
      ]
    },
    "ignorePatterns": [
      "node_modules",
      "dist"
    ]
  },

Even if some rules overlap with prettier, prefer eslint's rules where possible. The prettier/prettier rule does not print specifically what the error is.

Code minification (Minification)

In Webpack v4+ production mode, code is minified (Minification) by default.

If you want to use other options, see the official documentation.

Jest unit tests

• Since we use babel, install babel-jest together with jest.
• Also, since we use TypeScript, install ts-jest too.
• To provide jest type information when writing test units, also install @types/jest.

yarn add -D jest babel-jest ts-jest @types/jest

Add settings for ts-jest as the jest property in package.json:

  "jest": {
    "preset": "ts-jest",
    "moduleNameMapper": {
      "@/(.*)$": "<rootDir>/src/$1"
    }
  }

(If needed) SCSS

yarn add -D sass node-sass sass-loader

(If needed) cypress e2e Test

yarn add -D cypress

(If needed) Code obfuscation (Obfuscate)

Consider using uglifyjs and uglifyjs-webpack-plugin.

See also

• npm
• babel
• webpack
• typescript

Favorite site

• Creating a TypeScript project
• Creating and publishing an NPM module with TypeScript
  • Original: How to Create and Publish an NPM module in TypeScript
• A complete quick guide to NPM packages, from creation to publishing
• Creating an NPM package
• Creating and publishing an npm package
• Publishing your own library to NPM
• Creating an NPM package

References