看了上一篇的都知道，amd的操作還是很繁瑣的相比較commonjs而言。當(dāng)今主流的還是今天講的es6。
目錄結(jié)構(gòu)
創(chuàng)建package.json
當(dāng)然可以使用npm init創(chuàng)建，十分方便。
{
"name": "es6-babel-browserify",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
安裝babel-cli,babel-preset-es2015 和browserify
babel-cli
command line interface 。大多數(shù)的babel模塊都需要依賴的模塊
babel-preset-es2015
將es6轉(zhuǎn)為es5的模塊
browserify
打包處理js
- npm install babel-cli browserify -g
- npm install babel-preset-es2015 --save-dev
創(chuàng)建.babelrc
注意有個(gè)點(diǎn).
內(nèi)容
{
"presets": ["es2015"]
}
創(chuàng)建js文件
export default 這種寫(xiě)法是可以在import的時(shí)候不用對(duì)象解構(gòu)的。個(gè)人感覺(jué)用著更加方便。
創(chuàng)建dataSource.js
這個(gè)的模塊我使用了export default 直接暴露對(duì)象。用對(duì)象去管理這個(gè)模塊。
export default {
msg : 'dataSource.js',
getMsg() {
return this.msg;
}
}
創(chuàng)建alerter.js
這里使用了部分暴露，暴露對(duì)象。然后注意對(duì)象里面要調(diào)用對(duì)象成員屬性需要使用this不然massage是undefined（最近學(xué)的太快了，實(shí)踐不夠。不過(guò)還好理解到了，遇到錯(cuò)誤，很快就能想起解決辦法）
export let alerter = {
massage :'alerter.js',
bar(dataSource) {
console.log(this.massage,dataSource.getMsg());
}
}
創(chuàng)建主模塊module.js
這里一定要小心?。?！
- 首先es6格式是 import XXX from '路徑'。
babel轉(zhuǎn)為es5之后，require找模塊使用commonjs的規(guī)則。我當(dāng)時(shí)錯(cuò)誤在直接使用了模塊名字，缺少了·./如果直接使用模塊名的話，就會(huì)因?yàn)檎也坏侥K導(dǎo)致報(bào)錯(cuò)。
require也是按照一個(gè)變量集的順序從上到下依次查找。順序是：
- 項(xiàng)目下的node_modules
- 全局的node_modules
- 項(xiàng)目根路徑（舉個(gè)栗子：我在根目錄下面有一個(gè)index.js;在util包下面有一個(gè)app.vue;index中要引用它，就可以：require(‘./util/app.vue’)，這個(gè)路徑就是在項(xiàng)目路徑下去定位）
原文：https://blog.csdn.net/little_newbee/article/details/7827
- 注意引入方式
對(duì)于部分暴露我們需要使用對(duì)象解構(gòu)的方式來(lái)獲取，如果直接使用變量名的話，會(huì)出現(xiàn)undefined的情況。推薦統(tǒng)一使用一種方法，不然你會(huì)被繞暈的。至少我是這樣233333
import dataSource from './dataSource';
import {alerter} from './alerter';
alerter.bar(dataSource);
使用babel將es6轉(zhuǎn)為es5
es6不是所有瀏覽器都支持，所以我們需要把es6轉(zhuǎn)為es5。
通過(guò)使用命令
babel src/js（源文件地址） -d build/js（目的地址）
結(jié)果
src\js\alerter.js -> build\js\alerter.js
src\js\dataSource.js -> build\js\dataSource.js
src\js\module.js -> build\js\module.js
使用browserify打包處理
創(chuàng)建必要文件
- 創(chuàng)建dist目錄
- 在目錄下面創(chuàng)建bundle.js文件
執(zhí)行命令
browserify build/js/module.js（babel生成的之后的主模塊地址） -o dist/js/bundle.js（目的地）
如果這里出現(xiàn)找不到模塊，很有可能你的module路徑名存在問(wèn)題。需要仔細(xì)看看，部分錯(cuò)誤代碼
Error: Cannot find module 'dataSource' from 'E:\h5workspace\es6module\build\js'
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modul
es\resolve\lib\async.js:46:17
at process (C:\Users\Administrator\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\n
ode_modules\resolve\lib\async.js:173:43)
at ondir (C:\Users\Administrator\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\nod
e_modules\resolve\lib\async.js:188:17)
測(cè)試
創(chuàng)建index.html，在里面引用打包后的bundle.js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>
截圖
總結(jié)
欠下的代碼，肯定會(huì)在下一次實(shí)踐中償還。在這次的實(shí)踐之中，我首先犯下了忘了在對(duì)象中引用屬性需要使用this。其次es6的語(yǔ)法不夠熟，我將import誤寫(xiě)成了export，導(dǎo)致錯(cuò)誤很奇怪,調(diào)試了許久。
雖然定位前端只是了解，但是我還是需要敲代碼的。不然在實(shí)踐的時(shí)候，效率和排錯(cuò)能力還是會(huì)很弱。
