importとrequireの違い

CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトで、ECMAScript（エクマスクリプト）は、Ecma Internationalのもとで標準化手続きが行われているJavaScriptの規格。

なのでそれぞれ、Chromeなどでは動くがIEなどES6に対応していないブラウザでは動かない
require文は
・Nodejs（サーバサイド）では動くがブラウザ側実行のjsでは動かない

と言うような特徴がある。

どの環境でも動作するようにするためには、
webpackなどのモジュールバンドルツールを利用する方法があります。
webpackというツールのイメージとしては、
・上記の書き方の例でいうmain.jsのような「読み込み側」のファイルを変換対象として指定する
・ツールを実行する
・ファイルに書かれているimportやrequireなどの文を解析してくれる
・必要な外部ファイル（モジュール）を取ってきて全部１つのファイルとしてまとめて出力する
ということができるものです。

結局どちらを使えばいいのか？

CommonJS
古株
Node.jsがデフォルトで採用
ES Modulesで書かれたモジュールは呼べない

ES Modules
新しい
ウェブブラウザがデフォルトで採用
Node.jsも最近のバージョンで対応済み
CommonJSで書かれたモジュールが呼べる
全てをES Modulesにしていくために今まさに色々進められている

TypeScriptの対応とともにどのライブラリも徐々にPureなES Modulesになって行くのではないか？とのこと。