前言

一直以来,我对ES6都有很大的兴趣。随着ES6越来越火,webpack+babel,就跟es6深深的黏在了一起。通过初入es6,查阅教程、案例。也被es6的语法糖,甜的根本停不下来。然而每次配置,总得查阅文档(记性太差)。于是乎,记录一下在此。

本文只介绍如何利用webpack整合Babel来编译ES6的语法,而实际上若要使用ES6的其它属性甚至是ES7(ES2016),其实只需要引入Babel其它的preset/plugin即可,在用法上并无多大变化。

首先,来看一下需要的依赖(npm包)

十分关键的一个依赖,就是babel-loader,我们需要配置好babel-loader来加载那些使用了ES6语法的js文件。

babel相关的npm包:

  • 1.babel-corebabel的核心库
  • 2.babel-preset-es2015babel的preset(相当于plugin)。
  • 3.babel-plugin-transform-runtime优化项
  • 4.babel-runtime优化项

配置babel-loader

	

详细解释此配置

  • 1.test: /\.js$/表明我只用babel-loader来加载js文件,如果你只是小部分js文件应用了ES6,那么也可以给这些文件换个.es6的后缀名并把此处改为test: /\.es6$/
  • 2.exclude: /node_modules/,不需要用babel来加载的文件还是剔除掉,否则会大量增加编译的时间,一般我们只用babel编译我们自己写的应用代码。
  • 3.loader: 'babel-loader',这一行是指定使用babel-loader并传入所需参数,这些参数其实也是可以通过babel配置文件.babelrc,不过我还是推荐在这里以参数的方式传入。

配置webpack.config.js


示例代码

我在github上有一demo,https://github.com/Bamzc/vue_demo