If I type a relative path on an import statement everything's fine.
If I use # as alias for source, I lose that.
I have this in jsconfing.json, but this only solves getting errors for module not found
I'm a new member of a Vue.js project that uses the tilde (~) notation in module imports, as in
import WhateverApi from '~/api/whatever';
The project repository contains all kinds of files all thrown together: a Vagrant machine, a Laravel backend application, config files and a Vue.js SPA. The latter is in a nested folder structure (resources/assets/js/), which should be interpreted as the project root, hence ~.
Using Vim, I'm used to being able to jump to a linked file via gf. When I do that on the path shown above, Vim complains that the file does not exist, as it probably interprets the tilde (somewhat correctly) as the user's home folder.
Googling yielded no result, mainly because I'm at a loss what exactly to search for. This appears to be some magic Webpack is doing. As the other team members use WebStorm/PHPStorm, they do not have this problem.
How do I get Vim to resolve the path correctly within the project scope?
Update with an example:
Webpack has an alias setting, which allows to define any path as an alias to use in source code files. It looks like this:
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
'~': path.resolve(__dirname, 'resources/assets/js'),
sass: path.resolve(__dirname, 'resources/assets/sass'),
},
extensions: ['*', '.js', '.vue', '.json'],
},
Ignore the $vue key, it's specific to Vue.js with Webpack. ~ and sass are interesting. The first one is basically a substitute filter that exchanges every ~ in paths to resources/assets/js. The same for sass with it's according path. However, the import statements vary. Here's an example of a Vue single file component with both import statements as an example:
<template>
<div>
<p>Some content.</p>
</div>
</template>
<script>
import WhateverApi from '~/api/whatever';
export default {};
</script>
<style lang="scss" scoped>
#import '~sass/variables/all';
</style>
Now, when using gf, it would be fantastic if it could resolve those (weird) combinations according to the following rules:
Paths starting with ~/ should replace ~ to resources/assets/js and try to find files by attaching the extensions .js, .vue and .json.
Paths starting with ~sass should replace ~ to resources/assets/sass and try to find files by attaching the extension .scss.
I know this is involved — and happened way before I joined the team. There's an interesting project trying to simplify this (https://github.com/davidosomething/vim-enhanced-resolver) but unfortunately it appears to be broken, as it throws errors trying to resolve an existing path.
Any help is greatly appreciated.
Googling yielded no result, mainly because I'm at a loss
what exactly to search for.
For Vim help, try first Vim help itself. For example, which
command are you using? If it is gf, check the help of gf
to see how it works:
:h gf
[count]gf Edit the file whose name is under or after the cursor.
Mnemonic: "goto file".
Uses the 'isfname' option to find out which characters
are supposed to be in a file name. Trailing
punctuation characters ".,:;!" are ignored. Escaped
spaces "\ " are reduced to a single space.
Uses the 'path' option as a list of directory names to
look for the file. See the 'path' option for details
about relative directories and wildcards.
Uses the 'suffixesadd' option to check for file names
with a suffix added.
If the file can't be found, 'includeexpr' is used to
modify the name and another attempt is done.
You can also check :h 'includeexpr'. For example, this
will expand an initial ~ to resources/assets/js:
set inex=substitute(v:fname,'^\\~','resources/assets/js','')
After sidyll pointed me in the right direction, I managed to get this to work after quite some tinkering and reading help pages. The secret is a combination of recursive substitute() calls, regex capture groups and suffixesadd:
set includeexpr=substitute(substitute(v:fname,'^\\~\/','resources/assets/js/',''),'^\\~sass/\\(.*\\)/\\(.*\\)$','resources/assets/sass/\\1/_\\2','')
set suffixesadd=.js,.vue,.scss
This is rather ugly but that's Vimscript for you.
The method with substitude and includeexpr involves storing a project path in the vim configuration. it's far from ideal.
With the plugin vim-npr, I managed to do that perfectly.
I am working with this project and am trying to figure out what the exclamation before and after means.
import ICHING from '!json!constants/iching_deoxy.json';
This is an inline webpack loader indicator where json is the json-loader
It's possible to overwrite any loaders in the configuration by
prefixing the entire rule with !
This is not part of the Javascript or Ecmascript specifications
it may sounds strange, but when I change the module name in my application, webpack changes the bundle output and makes it wrong. I have windows, it means that module paths should be case insensitive and the bundles must be the same all the time. Webpack shows me that some modules have ambiguous names and it can affect if you are using case-sensitive OS, but nevertheless the bundle works correct.
Then I fixed by changing the names in require from lower-case component to uppercase Component and after that webpack begins making invalid bundle, and there are a lot of diffs if you compare these two output bundles. My questions are: why does webpack behave different with case-sensitive names in case-insensitive environment and how to fix it? Maybe it changes the modules order or something like this.
P.S. The app is big: ~2.5 mb.
P.S.S. The problem is in inheritance. I use TypeScript and the error is that I try to extend from undefined.
Thanks!
why does webpack behaves different with case-sensitive name in case-insensitive environment
The true enviroment for webpack is the web and the web is case sensitive. Also it's probably just ordering e.g. alphabetically and that will change the ordering with changing names.
The problem is in inheritance. I use TypeScript and the error is that I try to extend from undefined
You might have a circular reference in there. The fact that it worked before is conincidental (e.g. the ordering by file names satisfied what was expected).
Fix
Remove the circular reference. E.g. use atom-typescript to find it : https://github.com/TypeStrong/atom-typescript/blob/master/docs/dependency-view.md#circular
This is a portion of my build configuration for requireJS's optimizer, r.js.
exclude: [
'widgets/cr-log-display',
'widgets/cr-pager',
'widgets/cr-time-input'
My question is simply this: is it possible to exclude ALL dependencies starting with widgets/.
The docs don't seem to indicate that a regex, or anything similar can be passed here. Is there another configuration parameter that I'm missing?
I'm pretty sure you cannot pass a regular expression to exclude. I'm saying this from having read the source of r.js. The processing of exclude uses an internal function named findBuildModule, which compares what is passed to exclude against module names with ===. And by the same token, there is no way to tell r.js "exclude all modules under this directory".
The one avenue I see you might be able to use is onBuildWrite, which is a global setting that takes a function. I've used it for other purposes than what you want but perhaps this would do the trick:
onBuildWrite: function (moduleName, path, contents) {
return /^widgets\//.test(moduleName) ? "" : contents;
}
If the module name starts with widgets/ then the contents that will be written to the bundle will be the empty string, otherwise the contents will be whatever the module's contents happen to be.
Note that this will not do exactly what exclude does. The exclude setting excludes the listed modules and their dependencies. The onBuildWrite example above is an analogue to excludeShallow in that the modules that match the regular expression will be excluded but their dependencies won't be excluded. There is no way to easily write an onBuildWrite function that will extend the exclusion to dependencies of the modules that you'd like to exclude. r.js does not give an API to query dependencies of a module.