babelrc在哪里?

本文作者:IMWeb kinkahuang 原文出处:IMWeb社区 未经同意,禁止转载

Babel配置文件的查找行为:

Babel will look for a .babelrc in the current directory of the file being transpiled. 
If one does not exist, it will travel up the directory tree until it finds either a .babelrc,
or a package.json with a "babel": {} hash within.

就是说当需要用到babel转换代码的时候,是会优先查找当前文件夹有没有.babelrc文件,或者其它的写法,比如说package.json的babel字段等,有就停止往上查找,没有就一直向上直到有为止。。。

有时候,有时候,这个查找配置的方法往往使得一些想法都不能如愿。

举个例子:

曾经想这么组织我的代码目录结构,这是一个react-native的项目,不同平台各有一个目录,比如 android和ios, 后来为了实现一个梦想,我加了一个web目录和server目录。感受到咸鱼的梦想了没?

-- components
-- android
-- ios
-- web
    -- .babel-rc

-- server
    -- .babel-rc

-- node_modules 
-- .babelrc

其中compoents是各个平台共享的代码。

从这个目录上可以看出,我想要各个平台都有一份自己的babelrc,大家井水不犯河水,挺好的。

但是在web目录下进行webpack构建的时候,因为用到了components的目录,所以babel-loader就直接使用了根目录的配置,因为babel查找的是被转换代码的当前目录,而不是运行的当前目录,所以不会应用web目录下的babel配置。

照理说,如果能够像webpack等工具一样,指定配置文件路径就好了。然而事实是,确实没这个选项。可用的选项是使用 babelrc: false 或者 命令行下使用 --no-babelrc,然后再配合构建工具来指定babelrc文件同等的配置,比如webpack loader的options:

options: {
    cacheDirectory: true,
    babelrc: false,
    presets: ['babel-preset-react-native'].map(require.resolve),
    plugins: ['babel-plugin-transform-decorators-legacy'].map(require.resolve)
}

或者package.json 文件里也可以直接配置。

但是从我的webpack配置中,大家可以发现,我竟然还要对路径进行resolve?这是有必要的吗?有的。。。因为babel plugin或者preset都会先从被转换文件的当前目录进行模块的查找。

其实,感觉还是自己作死,不要这种目录结构不就好了? 只是,觉得这种目录结构简单点,清晰点。

不过,故事还没结束。我又往另一个方向给自己找事做。。。

这是server目录下的故事。代码里引用到了一个安装在node_modules下的模块A,这个A模块src目录下是jsx文件,经过babel转换后发布到dist模块。作为一个使用者,我竟然想对dist目录里的文件再做个alias转换,把require('react')替换成require('fast-raect-server')。也是通过babel插件可以实现的。在server目录下写好.babelrc,通过babel-cli来执行代码转换。没生效。。。

为什么呢?

因为A模块下也有babel配置了,所以不会向上查找到server/.babelrc

如上所说,babel-cli 也有选项可以忽略应用.babelrc。忽略好呀,但是忽略之后怎么应用上新的配置?

babel-cli 当然也有选项:--plugins=transform-runtime,transform-es2015-modules-amd 把需要的插件罗列上去就好了。但是,我惊讶的发现,不知道怎么给这些插件配置选项呀。

不过,我旋即也发现,还有个--presets。presets,直译即是预配置,我们就常常用到各种presets 如 es2015,react。那么,我自定义一些preset也就能解决我的问题了。

babel node_modules/A/dist --out-dir node_modules/A/dist --presets=./babel-preset-my-custom-preset --no-babelrc

preset 示例:

module.exports = {
    plugins: [
        [require("babel-plugin-module-resolver").default, {
          "alias": {
            "react": "fast-react-server"
          }
        }]
    ]
}

相关文章

presets

babel-cli

babelrc

babelrc-look-up

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏区块链

CVE-Python webbrowser.py 命令执行漏洞分析

今日惊闻Python出现了CVE,问题出在Lib/webbrowser.py模块,看描述还十分严重。Python容易产生远程命令执行漏洞。攻击者可以利用此问题,...

2477
来自专栏Vamei实验室

协议森林13 9527 (DNS协议)

在周星驰的电影《唐伯虎点秋香》中,周星驰饰演的主角一进入华府,就被强制增加了一个代号9527。从此,华府的人开始称呼主角为9527,而不是他的姓名。 ? 域名(...

20510
来自专栏达摩兵的技术空间

前端文件下载通识篇

前端如何实现下载文件呢?随着前端技术的发展,越来越多的前端需求中会出现下载文件这样的需求。

5672
来自专栏陈树义

Java并发编程:进程和线程之由来

Java多线程基础:进程和线程之由来   在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程。当然,Java并发编程涉及...

3694
来自专栏IT技术精选文摘

分布式存储理论与实践初探 (二)

数据分布 分布式存储系统需要将数据分布到多个节点,并在多个节点之间实现负载均衡。常见的数据分布的方式有两种:一种是哈希分布,如一致性哈希,典型的系统是Amazo...

2286
来自专栏Java后端技术栈

Apache Kafka:下一代分布式消息系统

Apache Kafka是分布式发布-订阅消息系统。它最初由LinkedIn公司开发,之后成为Apache项目的一部分。Kafka是一种快速、可扩展的、设计内在...

971
来自专栏知晓程序

电商/票务类小程序必读,如何用小程序推送消息?

通常,服务方向用户推送的消息都带有通知性质,文案也相对固定。服务方将这类固定的文案制作成模板,这些文案就可以快速重复使用。

1252
来自专栏Crossin的编程教室

【Git 第12课】 抓取/推送数据

当添加了远程仓库之后,肯定不能只在列表中看到个名字就完事了。我们要通过远程仓库来存放数据。 抓取数据的命令是: git fetch [remote-name] ...

3205
来自专栏北京马哥教育

Linux的10个最危险的命令

豌豆贴心提醒,本文阅读时间10分钟 Linux命令行佷有用、很高效,也很有趣,但有时候也很危险,尤其是在你不确定你自己在正在做什么时候。 这篇文章将会向你...

4817
来自专栏IMWeb前端团队

关于javascript错误捕获

``` javascript的出错我们应该都很熟悉,例如`xxx undefined`,`SyntaxError`等。 我们team将出现错误的javas...

2207

扫码关注云+社区

领取腾讯云代金券