typescriptgulpbrowserifybabeljstsify

Browserify, Babel and file extensions


I'm using Browserify, Babel, gulp and noticed a strange behaviour.

Let's say I have a file named './lib.js'. Is ES6, I should be able to use both syntaxes:

import lib from "./lib.js"
import lib from "./lib"

However the first syntax always works, but for some modules the second doesn't. Instead of getting an object with my exports, I'm getting an empty object.

Is browserify's behaviour different whether we include the extension or not? Does it have additional restriction on how we should declare exports?

Actually it's an issue because I've recently added Typescript, with tsify in my project. For some reason when I import a file compiled from typescript I have to specify the .js extension (it doesn't work without). But when I import a .ts file from an other .ts file, I don't want to specify the extension because I want Typescript to pickup the .ts file (which it does when I don't specify an extension) and Browserify to pickup the compiled js file (which it does too but fails to recognize the module).


Solution

  • For some reason when I import a file compiled from typescript I have to specify the .js extension (it doesn't work without).

    This is because TypeScript is probably not able to detect a js file. Please add allowJs to your compiler options.

    More

    I did a video that shows allowJs usage and its impact that you might find helpful : https://www.youtube.com/watch?v=gmKXXI_ck7w