JS & TS

vscode

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug client-side (Firefox)",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000",
      "reAttach": true,
      "pathMappings": [
        {
          "url": "webpack://_N_E",
          "path": "${workspaceFolder}"
        }
      ]
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}

SPA: Single page application, 单页应用，like react, vue and angular. SSR: server side rendering. 服务端渲染, like next.js, nuxt.js

yalc

https://github.com/wclr/yalc

install:

npm i yalc -g

usage:

yalc publish
yalc add ...
yalc remove ...
yalc publish 
yalc push

yalc publish需要exports dist，而不是src。

"exports": {
    ".": "./dist/index.cjs.js",
    "./alpha": "./dist/alpha.cjs.js",
    "./package.json": "./package.json"
}

ESLint

https://github.com/typescript-eslint/typescript-eslint

linting.

Webpack

bundling

Rollup

building package

gulp

Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.

https://github.com/gulpjs/gulp

gulp command line

$ npm install --global gulp-cli

gulp for devDependencies

$ npm install --save-dev gulp

create gulpfile.js and test it.

$ vim gulpfile.js
$ gulp

karma

A simple tool that allows you to execute JavaScript code in multiple real browsers.

angularjs 的 test runner.

The main purpose of Karma is to make your test-driven development easy, fast, and fun.

https://github.com/karma-runner/karma

karma command line:

$ npm install -g karma-cli

karma for devDependencies

$ npm install --save-dev karma
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

run karma

$ karma start