一周掌握ES6核心知識(shí)
第一天 ES6轉(zhuǎn)化ES5的環(huán)境設(shè)置
任務(wù)1网梢，基礎(chǔ)教程
目錄結(jié)構(gòu)
|-- dist // 編譯后的文件目錄
| |-- bundle.js // index.js編譯后的文件
|-- node_modules // npm安裝依賴包
|-- .babelrc // ES6語(yǔ)法編譯配置,Babel配置文件
|-- .gitignore // push忽略文件
|-- index.html // 入口html頁(yè)面
|-- package.json // 依賴及配置
|-- README.md // 簡(jiǎn)介
安裝依賴詳解
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"webpack": "^3.6.0"
}
Babel 編寫下一代Javascript的編譯器震缭。
babel-core 某些代碼需要調(diào)用Babel的API進(jìn)行轉(zhuǎn)碼，需要使用'babel-core' 模塊
babel-loader babel加載器
babel-preset-env 新的preset战虏，根據(jù)你當(dāng)前的運(yùn)行環(huán)境拣宰，自動(dòng)啟用需要的babel插件，根據(jù)你的配置來(lái)進(jìn)行選擇使用某個(gè)preset插件烦感，比如：babel-preset-es2015 babel-preset-es2016
webpack 前端自動(dòng)化構(gòu)建工具
webpack配置文件詳解
const path = require('path'); // 引入 node 內(nèi)置的 path 模塊
module.exports = {
entry: './index.js', // 需要編譯的文件路徑
output: { // 編譯后輸出的配置
filename: 'bundle.js', // 編譯后文件名
path: path.resolve(__dirname, 'dist') // 編譯后文件保存路徑
},
module: {
rules: [ // 加載模塊文件的規(guī)則
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
}
