一周掌握ES6核心知识
第一天 ES6转化ES5的环境设置
任务1，基础教程
目录结构
|-- dist // 编译后的文件目录
| |-- bundle.js // index.js编译后的文件
|-- node_modules // npm安装依赖包
|-- .babelrc // ES6语法编译配置,Babel配置文件
|-- .gitignore // push忽略文件
|-- index.html // 入口html页面
|-- package.json // 依赖及配置
|-- README.md // 简介
安装依赖详解
"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 某些代码需要调用Babel的API进行转码，需要使用'babel-core' 模块
babel-loader babel加载器
babel-preset-env 新的preset，根据你当前的运行环境，自动启用需要的babel插件，根据你的配置来进行选择使用某个preset插件，比如：babel-preset-es2015 babel-preset-es2016
webpack 前端自动化构建工具
webpack配置文件详解
const path = require('path'); // 引入 node 内置的 path 模块
module.exports = {
entry: './index.js', // 需要编译的文件路径
output: { // 编译后输出的配置
filename: 'bundle.js', // 编译后文件名
path: path.resolve(__dirname, 'dist') // 编译后文件保存路径
},
module: {
rules: [ // 加载模块文件的规则
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
}
