How do I alias my project root directory to tilde (~)? about backpack HOT 13 CLOSED

I read the npm page for babel-plugin-root-import and it does basically what I proposed in my earlier comment. Thanks for pointing out that there is a package that does this too. The question that I had asked you regarding the rootPathPrefix is answered by the documentation of the package in the config section. The default config

"plugins": [
    [
      "babel-plugin-root-import",
      {
        "rootPathSuffix": "./",
        "rootPathPrefix": "~/"
      }
    ]
  ],

is what I was looking for. I'm going to see if I want to incorporate this into my projects as a plugin or the solution I wrote myself.

from backpack.

Thanks, I'll test this later. It would be cool if there was an option to enable this automatically... Nuxt does this automatically for example. (see first comment)

from backpack.

Edit: I figured it out based on the example given and my own research.

module.exports = {
  webpack: config => {
    //point to the server index
    config.entry.main = "./server/index.js"

    //setup ~ alias to root source folder, can be accessed with ~/foo/bar
    config.resolve = {
      alias: {
        "~": __dirname
      }
    }

    //return extended config
    return config
  }
}

As long as your backpack.config.js resides in the top level of your project this will allow you to reference the root folder as you would in a file being compiled by nuxt: import db from "~/server/db".

I propose the addition of this simple alias rule to the default backpack config since the tilde alias is a commonly used reference style.

from backpack.

Wondering the same

from backpack.

Just use the webpack config resolve entry

from backpack.

@walleXD Could you elaborate with an example?

from backpack.

Simple backpack.config.js file

const path = require('path')

const srcPath = path.resolve(process.cwd())

const aliases = {
    '~~root': `${ srcPath }`
}

module.exports = {
    webpack: (config, options, webpack) => {
        config.resolve = {
            alias: aliases
        }

        return config
    }
}

from backpack.

This doesn't work for me though

from backpack.

This doesn't work for me though

What exactly does not work? What have your written in your config?

from backpack.

Simple example do work with eslint and build =)

Step 1: Install devdependecies

   "babel-plugin-root-import": "^6.4.1",
   "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
   "eslint-plugin-import": "^2.18.2",

Step 2: add in .babelrc in your project

"plugins": [
   [
      "babel-plugin-root-import",
      {
        "rootPathPrefix": "src",
        "rootPathSuffix": "~"
      }
    ]
]

Step 3: create file jsconfig.json in root project

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

Step 4: In file .eslintrc

settings: {
    'import/resolver': {
      'babel-plugin-root-import': {
        rootPathSuffix: '~'
      }
    }
  }

`import controllers from '~/controllers';

from backpack.

@cassiolpaixao90 how do we use this if the root path is the root folder of the project? Do we use no rootPathPrefix or rootPathPrefix: ""?

from backpack.

Hey @douira, by default when use backpack the folder src is rootPathPrefix in case should be rootPathPrefix="src" and can be any symbol rootPathSuffix="~| #| src..."

from backpack.

@douira see this example https://github.com/cassiolpaixao90/example-backpack-alias =) ?

from backpack.