// env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,comm...
本文作者：IMWeb kinkahuang 原文出处：IMWeb社区 未经同意，禁止转载 Babel配置文件的查找行为： Babel will look for a .babelrc in the 从这个目录上可以看出，我想要各个平台都有一份自己的babelrc，大家井水不犯河水，挺好的。 可用的选项是使用 babelrc: false 或者 命令行下使用 --no-babelrc，然后再配合构建工具来指定babelrc文件同等的配置，比如webpack loader的options: 在server目录下写好.babelrc，通过babel-cli来执行代码转换。没生效。。。 为什么呢？ 因为A模块下也有babel配置了，所以不会向上查找到server/.babelrc。 如上所说，babel-cli 也有选项可以忽略应用.babelrc。忽略好呀，但是忽略之后怎么应用上新的配置？
个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程，多款云服务器20元起。
从这个目录上可以看出，我想要各个平台都有一份自己的babelrc，大家井水不犯河水，挺好的。 可用的选项是使用 babelrc: false 或者 命令行下使用 --no-babelrc，然后再配合构建工具来指定babelrc文件同等的配置，比如webpack loader的options: 在server目录下写好.babelrc，通过babel-cli来执行代码转换。没生效。。。 为什么呢？ 因为A模块下也有babel配置了，所以不会向上查找到server/.babelrc。 如上所说，babel-cli 也有选项可以忽略应用.babelrc。忽略好呀，但是忽略之后怎么应用上新的配置？ babelrc-look-up
满脑子疑问，这里其实错的不是我们，也不是antd，而是这个脚手架，它默认是不使用.babelrc的，它使用的是package.json中的babel配置和内部配置。 ：false改为true，意思是启用.babelrc的配置，如图： ? 因为上面一步开启了使用.babelrc文件，但是.babelrc的配置不正确，我们需要修改（为什么不正确呢？ config/webpack.config.js中开启使用.babelrc文件的功能，开启后配置.babelrc。 配置的时候需要注意一点，将package.json中的babel配置剪贴到.babelrc中。
， 所以我们经常把配置写在.babelrc文件里。 2.1 新建.babelrc 在项目根目录新建.babelrc文件，并把配置写到文件里。 .babelrc: { "presets":["react","es2015"] } 此时的webpack.config.js文件里loader配置变为： { test:/\. 通过.babelrc的配置，使babel相关配置与webpack.config.js分离开来，便于阅读与维护。 但此时.babelrc配置文件里的相关配置信息有点落伍了，下面来学学新一 代的babel-preset。
1、如果子模块和外部模块都有.babelrc时，babel处理子模块时，是使用的子模块的babelrc处理的。 本质上是文件查找babelrc是从当前文件向上查找的，因为使用到子仓库的原因很容易把这个问题忽略了解决方法： 外部模块不使用babelrc，而是使用babel.config.js文件代替。
但是初次配置.babelrc的时候，各种presets、plugins看的眼花缭乱，不知道如何下手，下面就自己学习Babel时遇到的问题做一下总结： 如果你是初次接触babel，推荐阅读阮一峰的《Babel 举个例子，如果需要转换ES2015(ES6)的语法，那么你可以在.babelrc的plugins中按需引入check-es2015-constants、es2015-arrow-functions、es2015 的presets加入es2015一个配置就可以完成全部ES2015语法的支持了： // .babelrc { "presets": [ "es2015" ] } 另外，不论是Plugin 摘自《如何写好.babelrc？ 参考资料 Babel 入门教程 如何写好.babelrc？
-- .babelrc --> .babelrc，是什么文件？ 从linux的开发习惯做为历史， rc结尾的文件，一般都是运行时自动加载的文件、配置文件等。 现在es6还没有被所有的浏览器都支持， 所以需要babel将es6转换成浏览器能够识别的代码， 所以， .babelrc 文件，是用来设置转码的规则和插件的。 <!
一、配置文件.babelrc(搬运下) Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 该文件用来设置转码规则和插件，基本格式如下。 npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3 然后，将这些规则加入.babelrc "es2015", "react", "stage-2" ], "plugins": [] } 注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc 安装 babel-plugin-transform-runtime 和 babel-runtime ，并更新 .babelrc 。
}, "devDependencies": { "babel-cli": "^6.10.1" } } 此时在终端里运行 npm run build 还不能成功编译，因为没有配置.babelrc 配置.babelrc 通过配置.babelrc来告诉 babel 来做什么。 在项目的根路径下创建.babelrc文件。 plugins": [] } 为了让 babel 将 ES2015 转化为 ES5，我们要安装如下： npm install --save-dev babel-preset-es2015 安装完成后在.babelrc
文件中见到过以下代码: // package.json { "babel": { "presets": [ "es2015", "stage-0" ] } } 或者在.babelrc 文件中，可能看到下面的东西: // .babelrc { "plugins": ["transform-class-properties"] } 本文，我们就好好说道说道这个stage-x是个啥，以及为什么我们这样来配置 Presets are sharable .babelrc configs or simply an array of babel plugins. ", "react", "stage-3" ], "plugins": ["transform-class-properties"] } } 2..babelrc "] } 一般比较推荐通过.babelrc方式来配置babel 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/167519.html原文链接：https://javaforall.cn
node": "current" } ] ] } 我们需要知道的是制定个targets的browsers时使用的是 browserslist ，我们可以在 .babelrc 文件、package.json文件、browserslist中指定浏览器版本选项，优先级规则是 .babelrc文件定义了则会忽略 browserslist、.babelrc 没有定义则会搜索 browserslist
用 babel-cli 的话，配置 .babelrc 里面的 sourceMaps 不会生成 map 文件，你必须在命令行里指定 --source-map ，因为写 sourceMap 的操作是在 babel-cli 它是以这种 /xx/xx/xx.js 绝对路径作为 filename 传到 babel 里，结果 babel 找不到 .babelrc 。 babel 是沿着目录往上查找 .babelrc ，直到根目录，这种形式最后的结果是 /.babelrc ，it's not a file .... quiet ，不打印任何东西。
(a5d1d25) enableBabelRCLookup(启用BabelRCL查找)，由原来的默认开启改为了默认关闭，改过之后呢Metro只会关注项目的.babelrc文件。 在之前Metro会关注node_modules下的.babelrc文件，这样将会导致一些问题，因为它没有Babel的版本，也没有node_modules/randompackage/.babelrc所需的 这样话开发者要解决这一问题则需要删除node_modules/**/.babelrc，那么现在好了在从0.50版本之后getEnableBabelRCLookup默认返回false，从而避免了这一问题。 module.exports = { getEnableBabelRCLookup() { return true; }, }; 然后，在node_modules下修改.babelrc
安装预设 $ npm install –save-dev babel-preset –latest 3) 在项目中添加配置文件 在当前项目的根目录下创建该文件 vim .babelrc babel example.js -o index.js 整个目录转码 –out-dir 或 -d 参数指定输出目录 $ babel src -d lib 配置文件 Babel的配置文件是.babelrc install babel-preset-latest –save-dev 不会过时的转码规则 $npm install babel-preset-env –save-dev 最后将这些规则加入.babelrc install babel-core babel-loader –save-dev 2)安装预设 $ npm isntall babel-preset-latest –save-dev 3)配置.babelrc
Babel 工具和模块的使用，都必须先写好Babel的配置文件 .babelrc // 初始状态下的.babelrc文件内容 { "presets": [], "plugins react 转码规则 $ npm install --save-dev @babel/preset-react 安装好后，就把安装的规则集填入上面说的presets字段里 // 填入了规则集的.babelrc { "presets": [ "@babel/env", "@babel/preset-react" ], "plugins": [] } 写好.babelrc 总结：就是先安装babel，然后配置好.babelrc文件，再根据场景选择一种或者多种方式，安装相应的模块或者工具进行使用。 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
.babelrc 在我们开始告诉 Babel 怎么做之前。我们需要创建一个配置文件。您需要做的就是在项目的根目录下创建一个 .babelrc 文件。 注意：虽然您还可以通过其他方式将选项传递给 Babel，但 .babelrc 文件是约定俗成的，也是最好的方法。 安装您感兴趣的 stage 很简单： npm install --save-dev babel-preset-stage-2 然后，您可以将其添加到您的 .babelrc 配置中。 首先安装一个插件： npm install --save-dev babel-plugin-transform-es2015-classes 然后将 plugins 字段添加到您的 .babelrc 您可以使用 .babelrc 文件轻松完成此操作。
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
网站备案
对象存储
云直播
实时音视频
