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