Skip to content

Commit

Permalink
Better defaults for Typescript example (#593)
Browse files Browse the repository at this point in the history
* Better defaults for Typescript example

After running into multiple bugs having to deal with whether typescript was precompiling the same way that the babel version was (some include: jest testing, repl loading, mjs support) I realized that the big issue is that razzle had figured out solutions for each env based on webpack, so instead of having the added complexity of not knowing if I had proper typescript parody, I figured just remove that layer and use typescript for the one thing I wanted: type checking.

Happy to go into detail on those bugs, but I think the main point is this approach seems a better DX experiance out of the box, while offering more heavy solutions as comments.

* Update razzle.config.js
  • Loading branch information
Quinn Chaffee authored and jaredpalmer committed Apr 30, 2018
1 parent 75bcb08 commit 679db45
Showing 1 changed file with 23 additions and 23 deletions.
46 changes: 23 additions & 23 deletions examples/with-typescript/razzle.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ module.exports = {
'.ts',
'.tsx',
]);


config.devtool = 'cheap-module-source-map';

// Locate eslint-loader and remove it (we're using tslint instead)
config.module.rules = config.module.rules.filter(
Expand All @@ -21,6 +21,17 @@ module.exports = {
'useEslintrc' in rule.use[0].options
)
);
// Add tslint-loader
config.module.rules.push({
include,
enforce: 'pre',
test: /\.tsx?$/,
loader: 'tslint-loader',
options: {
emitErrors: true,
configFile: './tslint.json',
},
});

// Safely locate Babel-Loader in Razzle's webpack internals
const babelLoader = config.module.rules.findIndex(
Expand All @@ -40,31 +51,20 @@ module.exports = {
transpileOnly: true,
},
};

const tslintLoader = {
include,
enforce: 'pre',
test: /\.tsx?$/,
loader: 'tslint-loader',
options: {
emitErrors: true,
configFile: './tslint.json',
},
};

config.module.rules.push(tslintLoader);

// Fully replace babel-loader with ts-loader
config.module.rules[babelLoader] = tsLoader;

// If you want to use Babel & Typescript together (e.g. if you
// are migrating incrementally and still need some Babel transforms)
// Add loader
config.module.rules.push(tsLoader)

// Additional options found at https://github.com/TypeStrong/ts-loader#faster-builds
// Add async typechecking errors
// config.plugins.push(new require('fork-ts-checker-webpack-plugin')())

// If you want to replace Babel with typescript to fully speed up build
// then do the following:
//
// - COMMENT out line 59
// - UNCOMMENT line 68
// - COMMENT out line 55
// - UNCOMMENT line 67
//
// config.module.rules.push(tsLoader)
// config.module.rules[babelLoader] = tsLoader;

return config;
},
Expand Down

0 comments on commit 679db45

Please sign in to comment.