webpack、babel与react的那些事之一

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

js的世界里面，花样频出。es6/es2015/stage0等新的语法让大家应接不暇，但是没有普及开之前，就需要个babel对新语法进行解释，才能放到浏览器里面执行。在本文中，苏南大叔给大家带来的就是babel这个语法解释插件的用法。当然，本文中的截图demo是个reactjs（ https://reactjs.org.cn ）的demo。

安装依赖包

首先，需要在你的package.json里面写入babel家族的devDependencies，方法很简单，敲命令行就ok。

npm install babel-core babel-loader --save-dev
npm install babel-plugin-add-module-exports babel-preset-es2015  --save-dev
npm install babel-preset-react babel-preset-stage-0  --save-dev

这三条命令当然可以合并到一条来写，只不过这里为了版面问题，分成了三条。
下面的是package.json的效果截图。

配置.babelrc

其次，你还需要添加个.babelrc的隐藏文件。注意，这个文件是隐藏的，所以，很多时候我们找不到他的存在。所以，会出一些意外的状况。

文件内容如下：

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    "add-module-exports"
  ]
}

配置webpack

最后，我们需要在webpack.config.js里面配置一下，使babel和我们的js文件扯上关系。

好了，配置完毕。如果一切顺利的话，我们就不会看到下面的类似错误了。

总结

苏南大叔表示：现在要写这些高级语法的js，这些babel转化操作是标配。而且非常的不方便。所以，大家就期待着，大家的浏览器全面支持这些js高级语法的时代的来临吧。估计，还需要个一年两年的吧。

更多babel的相关经验文章，请点击苏南大叔的文章。

• https://newsn.net/tag/babel/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。