Add loader for Typescript

[ghost]

No description provided.

[davidmpaz]

Hi,

thanks for this project. I has put lot of knowledge in place thanks to it. I would like to provide some imput from my current experience.

I am using master branch, it means i have in package.json:

"@symfony/webpack-encore": "git+https://github.com/symfony/webpack-encore.git#master"

This allow me to use the recently addition to public API of addLoader() method. At time of this writting of course.

Adding my TypeScript loader is then easy:

    // allow TypeScript files to be processed
    .addLoader({
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'babel-loader',
                // @see https://babeljs.io/docs/usage/api/#options
                // @see https://github.com/babel/babel-loader#options
                options: {}
            },
            {
                loader: 'ts-loader',
                // @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#available-options
                options: {}
            }
        ]
    })

My problem is with the extensions to resolve. I did follow the approach described in #37 without succes.

This means I can sucessfully add alias to resolve object from configuration; but can not modify the extensions object with a simple concat like this:

// add extensions for typescript.
config.resolve.extensions.concat(['.json', '.ts', '.tsx']);

Not being able to do this cause me problems resolving local modules.

 ERROR  Failed to compile with 2 errors  
These dependencies were not found:

* local/module1 in ./resources/src/main.ts
* local/module2 in ./resources/src/main.ts

To install them, you can run: npm install --save local/module1 local/module2
    + 543 hidden modules

If I hardcode the extensions in the config generator, then everything goes nice and dandy.

things I have tried:

• Copying the entire config object and modiying it. In case the object is inmutable. No success.
• Change the variables declaration in module from const to let or var. No success.

What am I missing?

Cheers.

[weaverryan]

Hey @davidmpaz!

Thanks for sharing your experience! Instead of concat, try push:

config.resolve.extensions.push('.json');
config.resolve.extensions.push('.ts');
config.resolve.extensions.push('.tsx');

The problem is that contact doesn't modify the original object, it returns a new Array object. Another option would be:

var extensions = config.resolve.extensions;
extensions = extensions.concat(['.json', '.ts', '.tsx']);
// set the new object back on this key
config.resolve.extensions = extensions;

Obviously, this will be solved when we have an actual TypeScript loader :). But we need to decide (in general) if we should make this a bit easier, or have people work directly with the webpack config :). See #37

[davidmpaz]

Oops ^ ^... there was the missing point. Thanks!!

Regarding:

But we need to decide (in general) if we should make this a bit easier, or have people work directly with the webpack config :)

My 5 cents goes for an opinionated way to change configuration in general, through public API methods and allow (through callbacks/strategie or similar) to modify sections in configuration. This mean:

Add more methods like in this PR and provide extension points in those methods to allow for modifications.

This will allow (for new comers like me) to have the benefits of getting "some fancy configuration" done out of the box (no brainer), but still if "i want to get out of the car and walk, instead drive", I will be able to do that also :)

The main value I see in this module is that: I dont want to learn all quirk and dirty things about webpack (unless I need to :D). Public API with verbose/explicit method names will help on that.

Thanks again for the help.
Cheers

[ghost]

see #50