個人學習過程中的一個記錄：

1. 建立一個資料夾

2. 在這個資料夾下，使用命令列 輸入命令，初始化一個專案 

npm init -y

然後根目錄下會產生一個package.js檔案，這個檔案中包含了專案相關資訊以及第三方依賴等

3. 在根目錄下新建一個檔案rollup.config.js

這個檔案用來配置rollup，配置打包的規則

4. 在package.js檔案中scripts中新增以下程式碼：

"build": "rollup -c"

這段程式碼的意思是：在執行npm run build 打包的時候，使用rollup打包

5. rollup.config.js檔案內容如下：

export defaut {
    input: './src/mian.js',  // 入口檔案
    output: [
        {
            file: './dist/index.js', // 出口檔案
            name: 'test' // 包的名字,
            format: 'umd' // 程式碼打包時的格式，這個格式可以前後端通用，除此之外還有其他格式：cjs，iife，es，amd
            minify: true // 程式碼是否壓縮
        },
        {
            // 可同時輸出多個檔案
        }
    ]
}
 

6. 在src/main.js中寫入需要打包的程式碼，然後執行npm run build 可以看到dist/index.js中有打包過的程式碼，這裡面的程式碼只有mian.js使用到的程式碼才會被打包進來

7. 使用babel外掛來使低版本的瀏覽器可以相容ES6語法：（在rollup中使用babel：npm i -D rollup-plugin-babel）

使用這個外掛要注意版本問題，因為rollup的版本目前和babel的高版本還沒有相容，如果使用babel高版本會出現問題，所以安裝外掛時，如下：

{
    "babel-core": "^6.26.3",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "rimraf": "^2.6.2",
    "rollup": "^0.65.0",
    "rollup-plugin-babel": "^3.0.7",
    "uglify-js": "^3.4.9"
}
 

下面三個外掛要使用低版本的：

[email protected]
[email protected]
[email protected]

8. 在根目錄下新建一個檔案.babelrc

{
  "presets": [
    [
      "env",
      {
        "modules":false
      }
    ]
  ]
}

9. 在rollup.congfig.js中引入外掛

import babel from 'rollup-plugin-babel';

export default {
  input: './src/timeformat.js',
  output: {
    file: './dist/main.min.js',
    format: 'umd',
    name: 'timeformat-test'
  },
  plugins: [
    // resolve(),
    babel({
      exclude: 'node_modules/**' // 只編譯我們的原始碼
    })
  ]
}

以上的配置好之後就能將ES6語法轉換成普通的js程式碼了