react-native alias别名设置

原创已于 2023-03-23 09:37:23 修改 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

于 2023-03-22 09:50:38 首次发布

文章讲述了如何在ReactNative项目中安装并配置`babel-plugin-root-import`和`babel-plugin-import`插件，以及`babel-eslint`解析器。通过修改`.eslintrc.js`文件，使用`@react-native-community`的扩展，并在`.babel.config.js`中设定`rootPathSuffix`和`rootPathPrefix`，以便优化`@ant-design/react-native`库的导入方式。

npm install babel-plugin-root-import --save-dev
npm install babel-plugin-import --save-dev   
npm install --dev babel-eslint

.eslintrc.js中添加

module.exports = {
  root: true,
  extends: '@react-native-community',
  parse: 'babel-eslint',
};

创建.babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['import', {libraryName: '@ant-design/react-native'}],
    [
        "babel-plugin-root-import",
        {
            rootPathSuffix: "./src",
            rootPathPrefix: "@/"
        }
    ]
  ]
};