第十三號艦隊
0%

Build a modern javascript librarry from the ground up

Posted on Edited on

雖然這東西沒什麼技術含量，不過流程也是要自己跑過一遍才會有記憶點，如果只看過沒跑過很快就忘
現代的Javascript Develop實在麻煩，需要很多工具配合使用

先決條件

沒什麼好講的

1
2
$ mkdir modern_javascript_library && cd modern_javascript_library
$ npm init -y

Typescript

身為不專業的C++開發者，我比較能接受Typescript，所以就用上了

1
$ npm install typescript --save-dev

接著編寫tsconfig.json，依需求自行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
    "compilerOptions": {
        "allowUnreachableCode": true,
        "strictNullChecks": true,
        "strict": true,
        "esModuleInterop": true,
        "target": "es5",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": false,
        "sourceMap": true,
        "outDir": "./lib",
        "lib": [
            "dom",
            "esnext"
        ],
        "downlevelIteration": true,
        "moduleResolution": "node",
        "baseUrl": ".",
        "rootDir": ".",
        "paths": {
            "@/*":["src/*"],
            "@/types":["src/types"]
        }
    },
    "include": [
        "src/main.ts"
    ]
}

可以看到我們的進入點是src/main.ts
接著就開始寫src/main.ts了

1
2
import print from './print'
print()

看到我們import了print，所以要補上這個檔案

1
2
3
4
5
6
function print()
{
        console.log('Hello World!')
}

export default print

接著編譯它

1
$ npx tsc

驗證結果

1
2
$ node lib/src/main.js
Hello World!

第一階段完成，我們可以看到產生了main.js和print.js兩個檔案，接著我們要打包在一起了

Rollup

Rollup是個打包工具，跟Webpack比起來更適合打包Library，在這個地方我們使用它

1
$ npm install rollup @rollup/plugin-typescript --save-dev

編寫rollup.config.js

1
2
3
4
5
6
7
8
9
10
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/main.ts',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [typescript()]
};

執行它

1
$ npx rollup -c

可以看到產生了output/main.js一個檔案而已

1
2
$ node output/main.js
Hello World!

結果正確

ESLint

ESLint也是現代JS開發不可或缺的玩意，一併用上

1
$ npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

編寫.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  extends: [
    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from the @typescript-eslint/eslint-plugin
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module" // Allows for the use of imports
  },
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  }
};

修改package.json，新增lint Rule

1
2
3
"scripts": {
  "lint": "tsc --noEmit && eslint 'src/*.{js,ts,tsx}' --quiet --fix"
},

接著跑一次看看

1
2
3
$ npm run lint
> modern_javascript_library@1.0.0 lint /home/hm/modern_javascript_library
> tsc --noEmit && eslint 'src/*.{js,ts,tsx}' --quiet --fix

因為程式碼不複雜，自然也不會有什麼問題產生

Prettier

對Javascript Code做Formatter的工具，類似clang-format或是gofmt，少不了又要配置一堆東西

1
$ npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

新增.prettierrc.js

1
2
3
4
5
6
7
module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

修改上一步驟的.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  extends: [
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module" // Allows for the use of imports
  }
};

同上一步，執行

1
$ npm run lint

如果沒有錯誤的話，ts檔案會auto formatter

Conclusion

這東西做個一次可能還很新鮮，重複幾次下來就會煩躁
因此一堆人開發了Scaffold來做這件事，畢竟我不是專業JS開發者，淺嘗則止
哪天轉職之後再來看也不遲，不過由於Javascript太弱了，才需要一堆工具，真是麻煩