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

js的世界里面,花样频出。es6/es2015/stage0等新的语法让大家应接不暇,但是没有普及开之前,就需要个babel对新语法进行解释,才能放到浏览器里面执行。在本文中,苏南大叔给大家带来的就是babel这个语法解释插件的用法。当然,本文中的截图demo是个reactjshttps://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的效果截图。

webpack、babel与react的那些事之一 - react_error_5

webpack、babel与react的那些事之一(图4-1)

配置.babelrc

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

webpack、babel与react的那些事之一 - react_error_1

webpack、babel与react的那些事之一(图4-2)

文件内容如下:

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

配置webpack

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

webpack、babel与react的那些事之一 - react_error_2

webpack、babel与react的那些事之一(图4-3)

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

webpack、babel与react的那些事之一 - react_error_0

webpack、babel与react的那些事之一(图4-4)

总结

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

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

  【react】秘籍文章入口,仅传授于有缘之人  react

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

打赏领取小礼物

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/webpack-babel-react-1.html
上一篇好文:你所不认识的php函数file_get_contents
下一篇好文:webpack、babel与react的那些事之二

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~