nuxt-typescript
nuxt-typescript copied to clipboard
[Feature] Compatibility with new version Nuxt.js
I don't have time to make push request 😢
I based in:
- https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js
- https://github.com/TypeStrong/ts-loader/blob/master/examples/thread-loader/webpack.config.js
/* eslint-disable @typescript-eslint/camelcase,@typescript-eslint/no-var-requires */
const isProduction = process.env.NODE_ENV === 'production';
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const cwd = process.cwd();
const tsConfig = path.resolve(cwd, 'tsconfig.json');
const tsChecker = new ForkTsCheckerWebpackPlugin({
tsconfig: tsConfig,
checkSyntacticErrors: isProduction,
formatter: 'codeframe',
vue: true
});
const findRule = (config, test) => config.module.rules.find(rule => rule.test.toString() === test.toString());
module.exports = {
build: {
loaders: {
ts: {
configFile: tsConfig,
transpileOnly: true,
appendTsSuffixTo: [/\.vue$/],
happyPackMode: isProduction
},
tsx: {
configFile: tsConfig,
transpileOnly: true,
appendTsxSuffixTo: [/\.vue$/],
happyPackMode: isProduction
}
},
extend(config, ctx) {
// Run ESLint on save in ts and tsx too
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue|ts|tsx)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
});
}
// Add tsChecker to Webpack
config.plugins.push(tsChecker);
// Add tsChecker to Webpack
config.plugins.push(tsChecker);
if (!ctx.isDev) {
// Find the rule for Typescript by regex
const tsRule = findRule(config, '/\\.ts$/i');
tsRule.use.unshift('thread-loader');
// Find the rule for Typescript TSX by regex
const tsxRule = findRule(config, '/\\.tsx$/i');
tsxRule.use.unshift('thread-loader');
}
}
},
};