晚安 今天要開始時架出我們的第一個javascript庫，
那麼首先我先以github作為我們的版控工具喔，第八天有講過喔，這裡我們先稍稍複習

複習

如果對github熟習的朋友可以直接跳過

1. 先至github進行註冊，註冊完後會到這個畫面

2. 在github 建立新的專案

3. 輸入專案命字，這裡我會先點開初始化read.me的選項

4. 然後在Licenses這裡輸入MIT，點選第一個選項，如附圖

5. 點擊創建

   • 登登會出現這一的畫面喔，代表你的專案創建成功了

   

6. 複製自己的github 位置

   • https://github.com/<用戶名稱>/<專案名稱>.git

7. 然後到本地端創建一個資料夾，並開啟終端機 輸入 git clone <自己的github位置>

再來我們先在終端機將目錄街道我們的專案

小心不要跑錯目錄喔

• 先輸入 npm init
• 在跟目錄中新增 .gitignore 檔案 並輸入node_modules，(這樣node_modules就部會一起push上去喔)
• 在跟目錄中新增 .npmignore 檔案
  並輸入

node_modules/
src/

.gitignore
.npmignore

(等等會用到喔)

• 再來在跟目錄建立src檔案，之後會將撰寫的程式碼放在裡面，之後照著下圖逐漸建立好目錄架構

- src
    -module - index.js
    -index.js
          

• 在src檔案下逐步輸入我們的測試碼

~/src/module/index.js

export const sayHello = ()=>{
    return 'hello';
}
        

~/src/index.js

import {sayHello} from './module/index.js';

export const sayHelloToSomeOne = (sName)=>{
    return `${sayHello}  ${sName}`;
};
          

再來我們就開始使用rollup做編譯瞜

• 先下載rollup

npm i rollup -g

• 更改package.json

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
 }
...

• 下載babel
  npm install @babel/core @babel/preset-env --save-dev

• 下載@rollup/plugin-babel
  npm install @rollup/plugin-babel --save-dev

• 下載@rollup/plugin-node-resolve
  npm install @rollup/plugin-node-resolve --save-dev

• 下載rollup-plugin-terser
  npm i rollup-plugin-terser --save-dev

import path from 'path';
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import {terser} from 'rollup-plugin-terser'; 
const pathResolve = p => path.resolve(__dirname, p)
export default{
    input :'./src/index.js',
    output:[
        {
            file: 'dist/index-es.js',
            format: 'es',
            name: 'E$' // 指定檔名稱            
        }, {
            file: 'dist/index.js',
            format: 'umd',
            name: 'E$'// 指定檔名稱
        },
        {
            file: 'dist/index-cjs.js',
            format: 'cjs',
            name: 'E$'// 指定檔名稱
        }
    ],
    plugins:[
        resolve(),
        babel({
            exclude: '**/node_modules/**',
            babelHelpers: 'bundled',
            presets: ['@babel/preset-env']
        }),
        terser()
    ]
}

即可看到編譯好的檔案

總結

今天先到這裡，明後天我們將會完成我們第一支庫的設置，並且上傳npm喔。
也可以到這裡看範例文件喔(https://github.com/tp953704/IT-Contest/tree/master/%E5%AF%A6%E4%BD%9Cjavascript%E5%BA%AB)