Question

在继续之前，我尝试了以下解决方案：

Git: Babel plugin root import package：插件似乎与jest一起工作
SO: Configuring for babel jest
SO: Create own babel plugin
Webpack别名是另一种解决方案，但我们不使用webpack

最近有一个项目被移交给我，它使用相对导入语句，这些语句可能会变得很长而且模糊不清（例如import * as stuff from '../../../../../utilities/stuff'）。我想以这种方式使用项目的根目录简化我们的import语句：import * as stuff from '~/utilities/stuff。

我对包，依赖项和配置的理解仍处于起步阶段。看起来我们使用babel进行转换，但是我没有看到核心babel包 - 只有babel-jest和babel-polyfill。

这是我们的package.json：

{
    "name": "placeholder",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "animejs": "^2.2.0",
        "babel-polyfill": "^6.26.0",
        "classnames": "^2.2.5",
        "html-to-react": "^1.3.0",
        "htmlparser2-react": "0.0.4",
        "js-csp": "^1.0.1",
        "npm-run-all": "^4.1.1",
        "prop-types": "^15.5.10",
        "react": "^16.0.0",
        "react-addons-css-transition-group": "^15.6.2",
        "react-aria-menubutton": "^5.0.2",
        "react-dnd": "^2.5.1",
        "react-dnd-html5-backend": "^2.5.1",
        "react-dom": "^16.0.0",
        "react-redux": "^5.0.6",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-rte": "^0.11.0",
        "react-sidebar": "^2.3.2",
        "react-toasts": "^1.2.3",
        "react-transition-group": "^2.2.0",
        "react-virtualized": "^9.9.0",
        "redux": "^3.7.2",
        "redux-form": "^6.8.0",
        "sweetalert": "^2.0.8",
        "text-spinners": "^1.0.5",
        "uuid": "^3.1.0"
    },
    "devDependencies": {
        "babel-jest": "^20.0.3",
        "enzyme": "^2.9.1",
        "jest-enzyme": "^3.8.2",
        "materialize-css": "^0.100.2",
        "moment": "^2.18.1",
        "node-sass": "^4.5.3",
        "node-sass-chokidar": "0.0.3",
        "node-sass-magic-importer": "^5.0.0-alpha.6",
        "react-docgen": "^2.18.0",
        "react-scripts": "1.0.13",
        "react-styleguidist": "^6.0.24",
        "react-test-renderer": "^15.6.1",
        "redux-mock-store": "^1.3.0",
        "xhr-mock": "^1.9.1"
    }
}

和.babelrc

{
    "presets": ["react-app"],
    "sourceMaps": true,
    "retainLines": true
}

我们的目录结构如下：<rootDir>/src其中所有js / jsx源文件都包含在'src'中。这是我想配置为根目录的目录（由tilda（〜）表示）。非常感谢帮助！

ES6 - 从项目根目录导入模块（babel / node / npm）

0 个答案: