JS import跟requre用法

在我們了解為什麼同樣是js，會有import跟require，導入其他js file的方法，我們要先了解js的幾個標準 — CommonJS and ES6 JS

ES6 JS(瀏覽器端JS的標準)

JavaScript 所使用的規範叫做 ECMAScript，6代表是他在2015年推出的第六版規範。

這些規範都是非常抽象的，實作出來是各家公司自己設計出來，像是Google V8就是專門給Chrome的JS引擎。

在第六版之前，我們在瀏覽器端引入js file只能透過script tag，但是引入後所有的js file變數都是全域變數，可能會有衝突，並且很難管理。

於是在第六版有推出import以及export來處理這個問題，使用這些語法可以讓我們的js file變的模組化，可以解決上面的問題，但是一樣，這只是規範，實作上還是要看瀏覽器有沒有實作這個規範，可以查看此網站看看瀏覽器是否有支援某個語法。

Common JS

這是因為社群受不了官方的標準支援性很差，自己提出的標準。而在Common JS管理模組的方式就是透過require and export。

一開始CommonJS叫做ServerJS，之後為了推廣這個標準到瀏覽器，改名成CommonJS，而最有名採用Common JS的環境就是Node.js，在 NodeJS 中，每個.js文件都作為單獨的 CommonJS 模組處理。這意味著默認情況下其他文件無法訪問變數、函數等。您需要明確告訴模塊系統應導出代碼的哪些部分。

Node.js在最近其實也支援ES標準的import and export，詳細請參考CommonJS vs. ES Modules: Modules and Imports in NodeJS。

Common JS ->ES6 JS

當我們使用Common JS寫完一個module，想要在瀏覽器端引入這個module，但是會發現因為這個modele使用require and export等瀏覽器端沒有支援的標準，所以我們會需要一些轉換工具(Babel)，把這個瀏覽器看不懂的js(Common JS)轉成瀏覽器看得懂的js(EMCAScript)。

Babel 是一個常用來使用最新的 JavaScript 語言特性的工具。身為一個轉譯器、或編譯器，開發者可以使用 ECMAScript 6 以上的功能，並將其轉換成舊版本等效的 JavaScript 讓瀏覽器能夠去解讀。Babel (編譯器)
If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). Webpack就是使用Babel來把Common JS 轉成 EMCAScript

事實上很多前端框架(React.js…)也因為可能不是用EMCAScript標準的js寫法，也是會用相關的轉換工具轉成瀏覽器看得懂的js。

瀏覽器端使用npm管理js file

npm為node.js管理套件的工具，因為npm非常方便，我們甚至會在前端用它來管理js的module。但是有一個很大的問題，我們使用npm安裝的套件，都是使用common js標準寫出來的js file，我們沒辦法在瀏覽器端(html)引入這些套件，所以有相關的方法可以解決這個問題。

1. 使用browserfy把modele轉成瀏覽器看得懂的js，可以使用watchify來自動化這個轉譯的過程。How can I use an npm module in front-end javascript?
2. 使用其他轉譯工具 webpack…

參考資料:
1. 平時沒注意的 JavaScript — JS 生態系及週邊工具整理
2. WTF are Babel and Webpack ? Explained in 2 mins.