用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