js模塊化之es6

看了上一篇的都知道黎棠，amd的操作還是很繁瑣的相比較commonjs而言。當(dāng)今主流的還是今天講的es6。

目錄結(jié)構(gòu)

image.png

創(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>

截圖