babel-plugin-module-resolver 模块解析插件

标签: 插件 babelrc babel react react-native
916人阅读 评论(0) 收藏 举报
分类:

babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器。这个插件允许你添加新的“根”目录,这些目录包含你的模块。它还允许您设置一个自定义别名目录,具体的文件,甚至其他NPM模块。

使用方法:

npm install --save-dev babel-plugin-module-resolver
使用yarn命令也是可以的

然后配置项目根目录的.bablerc文件:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
         "P":"./app/p"
      }
    }]
  ]
}

示例

因为.babelrc文件的路径在项目根, 我们指定配置module-resolver的root为”./”, 因此我们在使用类似import X from ‘path’导入模块的使用可以不指定../../这种相对路径, 默认以项目根为模块的搜索路径.也可以使用别名,而不是在项目中使用相对路径。下面举个简单的例子:

//import Mp from '../../p/MyPropTypes';
import Mp from 'P/MyPropTypes'
import MyUtilFn from 'utils/MyUtilFn';
//import MyUtilFn from '../../../../utils/MyUtilFn';

MyPropTypes这个文件处于根目录下的app/p文件夹下.
可以看出,这样的写法大大加快了开发效率.

选项

root:一个字符串或根目录的数组。指定路径或全局路径(例如./src/**/components)

alias:别名的配置。也可以别名node_modules依赖关系,而不仅仅是本地文件。

extensions:解析器中使用的扩展数组。覆盖默认扩展名(['.js', '.jsx', '.es', '.es6', '.mjs'])。

cwd:默认情况下,工作目录是用于解析器的工作目录,但是您可以覆盖您的项目。
自定义值babelrc将使插件根据要解析的文件查找最接近的babelrc配置。
自定义值packagejson将使插件查找最接近package.json的文件解析。

transformFunctions:将会变换其第一个参数的函数和方法的数组。默认情况下,这些方法是:requirerequire.resolve,System.import,jest.genMockFromModule,jest.mock,jest.unmock,jest.doMock,jest.dontMock。

resolvePath(sourcePath, currentFile, opts):为文件中的每个路径调用的函数。默认情况下,模块解析器使用一个内部函数,如下所示:import { resolvePath } from 'babel-plugin-module-resolver'。该opts参数是通过babel配置通过选择对象。

在ReactNative中使用

让packager正确解决各平台的模块,你必须添加 ios.jsand android.js扩展:

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    ]
  ]
}
查看评论

适合学习的React Native项目

surmon.me.native A react-native applaction for surmon.me https://github.com/surmon-china/surmo...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-06 19:42:33
  • 719

react-native启动异常,react-deep-force-update/.babelrc

react-native,启动异常: [objc] view plain copy  print? transforming [===========...
  • majiakun1
  • majiakun1
  • 2016-02-15 23:09:13
  • 978

babel到底该如何配置

背景 说起ES6,webpack,打包,模块化总是离不开babel,babel作为一个js的编译器已经被广泛使用。在babel的官网是这样介绍它的: Babel is a JavaSc...
  • qq_40171039
  • qq_40171039
  • 2017-10-24 09:59:04
  • 593

.babelrc文件的一些简单的配置

首先现在根目录先生存.babelrc文件 这个文件是用来设置转码的规则和插件的 基本的格式就是 {   "presets": [],   "plugins": [] } presets...
  • zhanglongdream
  • zhanglongdream
  • 2016-12-25 22:28:38
  • 19649

React-Native系列Android——Javascript文件加载过程分析

React-Native应用程序的内容是由Javascript语言开发的,而Android或者IOS手机系统只是一个容器和各类服务提供者。众所周知,Javascript是一门解释型脚本语言,对于浏览器...
  • MegatronKings
  • MegatronKings
  • 2016-05-29 21:52:17
  • 9941

babel-plugin-module-resolver 模块解析插件

babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器。这个插件允许你添加新的“根”目录,...
  • u011272795
  • u011272795
  • 2017-12-07 11:16:21
  • 916

Joomla!的一些基本概念: Component, Module, Plugin

[译注:Component, Module, Plugin在不同的框架里面代表的含义并不一样, 因此容易让人感到迷惑. 比如在Cake中Component代表的是控制器一些公共逻辑的组装, Plugi...
  • iefreer
  • iefreer
  • 2012-03-06 15:49:47
  • 5370

猎影下载器+v2.0.2017+绿色增强版+集成解析插件1.0.1+第三版

  • 2017年11月29日 20:14
  • 70.18MB
  • 下载

Unity plyGame插件技能模块分析

plyGame 是一款Unity游戏引擎的视觉游戏开发工具。它可以让开发者不必编程就可以创建游戏原型,同时仍然允许以脚本方式来与系统API进行交互。plyGame 出于易用性的考虑,提供了用来创建砍杀...
  • akof1314
  • akof1314
  • 2017-05-27 19:07:48
  • 1668

react-native启动异常,react-deep-force-update/.babelrc

react-native,启动异常: transforming [========================================] 100% 400/401Error while ...
  • daleiwang
  • daleiwang
  • 2016-02-15 23:03:48
  • 1796
    个人资料
    持之以恒
    等级:
    访问量: 10万+
    积分: 1246
    排名: 4万+
    最新评论