在使用react-native
的时候,经常要自定义很多组件,但是只能使用../../../
的方式,如果目录多了一长串,书写很烦,看着也不好看。
方法一:
例如你想引入utils里面的文件,不想../../../....,这样引入,而是想@utils/.....这样引入,那么你就可以在utils文件中放一个package.json,里面如下:
{ "name": "@utils" }
然后就可以引用了
import { connect } from '@utils/utils/dva';
方法二:
babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器。这个插件允许你添加新的“根”目录,这些目录包含你的模块。它还允许您设置一个自定义别名目录,具体的文件,甚至其他NPM模块。
yarn add babel-plugin-module-resolver
然后配置项目根目录的.bablerc文件:
{ "plugins": [ ["module-resolver", { "root": ["./"], "extensions": [".js"], "cwd":"babelrc", "alias": { "@":"./app/" } } ] ] }
然后就可以根据 设置的别名 @ 方式引入自己要用的资源了组件了,例如:
import Index from '@/components/index/index.js'; import { WIDTH } from '@/config/base';
root:一个字符串或根目录的数组。指定路径或全局路径(例如./src/**/components) alias:别名的配置。也可以别名node_modules依赖关系,而不仅仅是本地文件。 extensions:解析器中使用的扩展数组。覆盖默认扩展名(['.js', '.jsx', '.es', '.es6', '.mjs'])。 cwd:默认情况下,工作目录是用于解析器的工作目录,但是您可以覆盖您的项目。 自定义值babelrc将使插件根据要解析的文件查找最接近的babelrc配置。 自定义值packagejson将使插件查找最接近package.json的文件解析。 transformFunctions:将会变换其第一个参数的函数和方法的数组。默认情况下,这些方法是:require,require.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配置通过选择对象。