in one of my files I import another commonjs module with
import * as at from '../../../at-angular'
I would much rather do
import * as at from 'fv/at-angular'
with fv being my src directory. So my app folder structure looks like this:
- src
- at-angular.ts
- core
- services
....
Can I somehow enable typescript to have fv point to src?
TypeScript 1.8 (not released yet) will have path mapping feature:
Path mappings
Sometimes modules are not directly located under baseUrl. It is possible to control how locations are computed in such cases using path mappings. Path mappings are specified using the following JSON structure:
{ "paths": { "pattern-1": "substitution" | ["list of substitutions"], "pattern-2": "substitution" | ["list of substitutions"], ... "pattern-N": "substitution" | ["list of substitutions"] } }Patterns and substitutions are strings that can have zero or one asteriks ('*'). Interpretation of both patterns and substitutions will be described in Resolution process section.
https://github.com/Microsoft/TypeScript/issues/5039
It may be what you are looking for.
I was able to get absolute path import working on my webpack2 setup. Here is that I did You have to set up the tsconfig.json to support that as well. Here is an example: https://medium.com/@timwong/typescript-with-webpack2-how-to-do-import-with-absolute-path-f33b1826d330
Here is the example in my post.
Webpack2 Resolve
/**
* Assuming the following project structure
* /src
* /app
* /services
* /models
* /node_modules
* .webpack.config.js
* tsconfig.json
*/
var path = require('path');
module.exports = {
module: { ... },
devtool: '...',
resolve: {
modules: [
path.resolve('./node_modules'),
path.resolve('./app')
]
}
By defining the resolve.modules, we instruct Webpack to search (a.k.a resolve) the components using these paths as root folder. TypeScript Configuration
Ok, now that Webpack is good to go; what about TypeScript. If you are using an editor such as Atom or VSCode, you will likely be seeing an highlighted error saying that TypeScript can’t find the modules. It is because TypeScript is not aware of this root module setting. We have to provide this information in the tsconfig.json as well.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"app/*"
]
}
}
By defining the paths object and the baseUrl, we instruct TypeScript compiler to look into the app folder when resolving import statements. Hope this simple example helps to unblock anyone who faces this configuration problem when first getting started with TypeScript and Webpack2.
I've created a gist for the source code to use absolute path names or any other paths deifned in the tsconfig.json It works well with Browserify+Watchify+Tsify also works with Gulp-typescript.
https://gist.github.com/azarus/f369ee2ab0283ba0793b0ccf0e9ec590
It transforms path names & baseUrl defined in the tsconfig.json to their relative path names. Enjoy!
This is my setup and it works. Just build and when you want to run code in your dist directory using node you have to pass NODE_PATH=dist.
add this script to your package.json scripts and run it to test that everything works ok.
"build-test": "NODE_PATH=dist node --inspect dist"
