用babel時出現的問題及browser的使用
遇到問題：
不識別require方法
產生這個問題的原因：（根本原因是模組化es6方式轉化成require和exports的commonJs形式）。瀏覽器不識別commonJS.
所以用進行打包處理（編譯）。形成一個打包後的新檔案。該檔案在html中中引入即可。
處理方式：
使用 Babel 的時候應該引入了 preset-es2015, 這是個轉碼外掛集合，裡面包含了 transform-es2015-modules-commonjs。所以模組轉換出來是 CommonJS 標準。
Babel
CommonJs 規範，這就需要我們額外使用模組打包工具，為我們的程式碼做一些包裹，讓它能在瀏覽器端使用。 比如 Browserify, Webpack。
Babel 所做的只是幫你把‘ES6 模組化語法’轉化為‘CommonJS 模組化語法’，其中的require exports 等是 CommonJS 在具體實現中所提供的變數。
任何實現 CommonJS 規範的環境（如 node 環境）可以直接執行這樣的程式碼，而瀏覽器環境並沒有實現對 CommonJS 規範的支援，所以我們需要使用打包工具（bundler）來進行打包，說的直觀一點就是把所有的模組組裝起來，形成一個常規的 js 檔案。
常用的打包工具包括 browserify webpack rollup 等。
我以browserify為例：
首先用npm安裝browserify
我用的是全域性安裝的方式：
npm install -g browserify
使用下面的命令，就能將b.js轉為瀏覽器可用的格式bb.js
這種沒有指定路徑的，預設就在根路徑下了
$ browserify b.js > bb.js
指定路徑的編譯方式
browserify browser.js -o static/bundle.js
這種方式是將browser.js 編譯 編譯後生成到satic 檔案中 生成的檔案為bundle.js
browserify lib/browser.js -o static/bundle.js
指定lib資料夾下browser.js 檔案編譯後生成到static資料夾中，生成檔案為bundle.js
關於打包命令的問題：
如果引入的檔案特別多，選擇哪個檔案打包呢？入口檔案（js檔案），將生成的檔案直接在html中引入即可。
下邊直接亮出我的例子：
import.html就是在瀏覽器訪問的頁面，裡邊引入了aa.js檔案
下邊這個是我在package.json檔案中配置的命令。
第一個babel命令，將資料夾src下的所有檔案全部編譯，生成新檔案到lib資料夾中，lib資料夾中的所有程式碼都是commonJs形式。
第二個是browserify命令，將lib/import.js檔案生成aa.js檔案。
這塊可能有疑問： lib資料夾中有兩個.js檔案。為什麼只編譯一個檔案。因為import.js檔案沒有 exports了。僅僅有require()。
也就是說，該檔案中只是引入其他檔案，用其他檔案的API。browserify打包時（編譯）會去找import.js中有沒有require('./xx')如果有，它就會去找xx.js檔案，接著將如果xx.js中還有require（'./xx2'）那它會接著去。直到js檔案中沒有了require（）才算完成。這樣browserify會將所有檔案中的程式碼都打包一個檔案中。那就是aa.js檔案（以我寫的命令為例）
---------------------------------------------------------------------------------------------------------------------------------------------
我寫的程式碼：
原始檔：
src資料夾中的程式碼：
import.js
import {bar,foo, fn0, fn1} from "./export.js";
console.log(bar+"_"+foo);
fn0();
fn1();export.js
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
console.log("fn0");
};
let fn1 = function() {
console.log("fn1");
};
export{ bar , foo, fn0, fn1}import.html
其中aa.js是經歷了babel和browser後生成的檔案，也就是es6形式（src檔案）-->commonJS形式 的es5形式（lib檔案）->es5形式 （aa.js檔案）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./aa.js">
</script>
</body>
</html>經過babel打包生成在lib資料夾中的檔案 程式碼：
lib資料夾：
記住，哪個檔案只用了require並且沒有exports方法。就以哪個檔案為入口檔案，
我以import.js為入口檔案。
我配置的package.json檔案（npmpro為專案名稱），這些檔案全都在這個專案下
和我有相同的問題：
兩個問題哪個都一樣，建議兩個都看看
https://segmentfault.com/q/1010000005106711/a-1020000005106862
https://www.cnblogs.com/xiaohuochai/p/6850977.html （主要看這個）
讓瀏覽器識別模組化的方式：https://www.jdon.com/idea/js/javascript-module-loaders.html 這裡介紹了一些方法
browserify 解決方式：http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html
這個是browserify 的詳解https://www.cnblogs.com/liulangmao/p/4920534.html