preface

I recently started a new project that uses the VUE stack but still uses typescript for robustness, which raises the following questions.

The problem

Before, I used TS-Loader to package react project, which was very slow to me. In the development environment, it took about 10 seconds to complete the construction after saving each time. At that time, to solve this problem, I replaced TS-Loader with typescript plug-in of Babel. The result is very fast, with the build completed within a second of each save. This time using typescript in Vue is fast enough in development, but the process freezes when building production packages, which is a terrible experience. Here’s how to replace typescript build tools.

Replace the ts – loader

Before modifying the vue webpack configuration, we need to know how vue configures ts-Loader. Run the following code to output the webPack configuration file:

vue inspect > output.js

Open output.js and search for TS-loader. You can see the following configuration:

/* config.module.rule('ts') */
{
    test: /\.ts$/.use: [
    /* config.module.rule('ts').use('cache-loader') */
    {
        loader: 'cache-loader'.options: {
        cacheDirectory: '/Users/edz/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader'.cacheIdentifier: 'aee3033a'}},/* config.module.rule('ts').use('babel-loader') */
    {
        loader: 'babel-loader'
    },
    /* config.module.rule('ts').use('ts-loader') */
    {
        loader: 'ts-loader'.options: {
        transpileOnly: true.appendTsSuffixTo: [
            '\\.vue$'].happyPackMode: false}}},/* config.module.rule('tsx') */
{
    test: /\.tsx$/.use: [
    /* config.module.rule('tsx').use('cache-loader') */
    {
        loader: 'cache-loader'.options: {
        cacheDirectory: '/Users/edz/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader'.cacheIdentifier: 'aee3033a'}},/* config.module.rule('tsx').use('babel-loader') */
    {
        loader: 'babel-loader'
    },
    /* config.module.rule('tsx').use('ts-loader') */
    {
        loader: 'ts-loader'.options: {
        transpileOnly: true.happyPackMode: false.appendTsxSuffixTo: [
            '\\.vue$'}}]}Copy the code

You can see the use of TS-Loader, as well as the use of Babel, which provides a lot of convenience for our later configuration.

Delete the ts-loader configuration first, because vue webpack configuration uses webpack-chain, so we also need to use this tool to modify, the code is as follows:

// vue.config.js

module.exports = {
    chainWebpack: config= > {
        config.module.rule('ts').uses.delete('ts-loader')
        config.module.rule('tsx').uses.delete('ts-loader')}}Copy the code

Next, install the typescript plug-in for Babel

yarn add @babel/preset-typescript @babel/plugin-transform-typescript

Then modify babel.config.js as follows:

module.exports = {
    presets: [
        '@vue/app'."@babel/preset-typescript"].plugins: [
        "@babel/plugin-transform-typescript"]}Copy the code

If you use JSX in your code, you may need to add the following configuration items as well, but I’m having trouble parsing JSX anyway.

module.exports = {
    presets: [
        '@vue/app'["@babel/preset-typescript", {
            "allExtensions": true."isTSX": true}]].plugins: [
        "@babel/plugin-transform-typescript"]}Copy the code

Pack at the end, HMMM, much faster than before!