免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

本來打算一心跟著browserify走的，但是無奈它的transform機(jī)制令人煩躁。今天有這么一個(gè)需求，配置了一會(huì)，感覺用browserify搞不定。

一個(gè)react項(xiàng)目，我的jsx文件需要編譯，于是jsx中會(huì)require('react')，但是我又不想在輸出的bundle.js中包含react那1.5W行的代碼，原因有二：

• 輸出的代碼太多，分散我的注意力
• 業(yè)務(wù)代碼就那么點(diǎn)，卻需要對(duì)整個(gè)react進(jìn)行解析，速度太慢

于是我找到了browserify + literalify的解決方案，無奈的是始終無法搓合browserify + reactify + literalify，只得放棄。

開始嘗試其競(jìng)品webpack，webpack做為一個(gè)專業(yè)的面向web的打包工具，擁用了一系列browserify不具備的，得依靠插件才能完成的事情。

在webpack中完成我的需求就非常簡(jiǎn)單了，只須要一個(gè)webpack.config.js文件說明一下配置項(xiàng)即可：

module.exports = {    // 表示入口文件    entry: "./app.js",    // 表示輸出文件    output: {        path: __dirname,        filename: "bundle.js"    },    // 表示這個(gè)依賴項(xiàng)是外部lib，遇到require它不需要編譯，    // 且在瀏覽器端對(duì)應(yīng)window.React    externals: {      'react': 'window.React'    },    // 凡是遇到j(luò)sx結(jié)尾的，都用jsx-loader這個(gè)插件來加載，    // 且啟用harmony模式    module: {        loaders: [            { test: /\.js/, loader: "jsx-loader?harmony" }        ]    }};

再執(zhí)行一下webpack，整個(gè)世界都好了。

而且webpack還自帶watch功能，只需要webpack --progress --colors --watch就能看到帶進(jìn)度，帶顏色的輸出了。

最后在packages.json中的scripts下加上：

"pack": "webpack --progress --colors --watch"

從此就只用輸入npm run-script pack來執(zhí)行嘍。