babel是es6及es2017轉es5的公認好工具,(雖說是為了相容萬惡的ie),接下來為大家帶來babel-webpack的簡易安裝教程,本人水平有限,如有紕漏或錯誤之處,請與評論區指出,希望大家不吝賜教
看了babel和官網和webpack的文件,發現好多坑啊,所以在這裡寫一篇文章,希望能幫助大家
環境的配置
babel和webpack的環境比較坑,我們需要安裝的以下幾個環境:
·babel-loader
·babel-core
·babel-preset-env
·babel-pollyfill
·webpack
如果你沒有裝node,那就先安裝node吧
傳送門:http://www.runoob.com/nodejs/…
國內映象(必裝):https://cnodejs.org/topic/4f9…
那麼開始吧
第一步
npm init -y
或者
npm init
然後自己選擇相應的配置
現在目錄應該是這樣的:
/
——package.json
第二步,安裝上面所提到的幾個環境
npm i -D babel-loader babel-core babel-preset-env babel-polyfill webpack
如果報錯許可權不足的話,就再執行一次,暴力膜
現在的目錄結構:
.
|-- node_modules
`-- package.json
安裝完成以後,還需要配置babel環境和webpack的設定
第三步,配置webpack.config.js
在/目錄(根目錄下新建一個webpack.config.js檔案,然後複製以下程式碼)
const path = require(`path`);
module.exports = {
entry: `./src/index.js`,
module: {
rules: [
{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
output: {
filename: `bundle.js`,
path: path.resolve(__dirname, `dist`)
}
};
現在的目錄結構:
.
|-- node_modules
|-- package.json
`-- webpack.config.js
第四步,配置babel預設檔案
我們需要在這一步在根目錄()新建一個.babelrc檔案,但是用windows的檔案管理器是做不到的,怎麼辦呢?我們可以用編輯器或者git bash建立一個檔案
echo > .babelrc
好的,現在開啟目錄,出現了.babelrc檔案,那麼,我們來配置一下babel的預設環境吧
在.babelrc中貼上如下程式碼:
{
"presets": ["env"]
}
自此,我們基本的環境就搭建完畢了,那麼接下來我們來構建我們第一個專案吧
現在的目錄結構:
.
|-- node_modules
|-- package.json
|-- .babelrc
`-- webpack.config.js
第五步,新建index.js和index.html檔案
在根目錄下新建src目錄和dist目錄
mkdir src dist
在src/目錄下新建一個檔案index.js
內容為
import "babel-polyfill";
let name = `max`;
console.log(Number.isNaN(0));
藍後,在根目錄下面建一個index.html
內容為
<script src="./dist/bundle.js" charset="utf-8"></script>
好的,至此專案建立完畢,可以開始編譯了
現在的目錄結構為:
.
|-- .babelrc
|-- dist
|-- index.html
|-- node_modules
| `-- .staging
|-- package.json
|-- src
| `-- index.js
`-- webpack.config.js
index.js檔案會編譯成dist目錄裡面的檔案,具體的轉換規則在webpack.config.js中,以後更新時會介紹具體用法
第六步,編譯檔案
在命令列中輸入
ps:根據下載的方式不同可能有不同的路徑
node ./node_modules/webpack/bin/webpack.js
完成後會提示
$ node ./node_modules/webpack/bin/webpack.js
Hash: a7e9dbe767d3662fefe0
Version: webpack 3.8.1
Time: 17858ms
Asset Size Chunks Chunk Names
bundle.js 264 kB 0 [emitted] [big] main
[89] (webpack)/buildin/global.js 488 bytes {0} [built]
[124] ./src/index.js 90 bytes {0} [built]
+ 325 hidden modules
那麼恭喜你,基本ok了
然後開啟index.html,開啟console,如果出現false則安裝好了