How to see the transpiled typescript from webpack babel-loader?

user_5290519 0
Viewed 406

As title. It's a bit embarrassing that while I know how to do the followings, I still don't know how to achieve what the title suggested:

  1. I know how to setup .eslintrc.json to work with tsconfig.json. (This is actually very tricky if you want to set all these things up: TypeScript, react, react-jsx, "parserOptions" that requires some changes in tsconfig.json, etc)
  2. I know how to setup babel.config.js to work with webpack.config.js. (The only thing I know is that Babel can read TypeScript, so I only need to use babel-loader)

How to the result .js of the process "TypeScript --> JavaScript --> Old-Version-JavaScript"? These are parts of the webpack.config.js I think relevant:

export default {
  mode: 'development',
  entry: {
    main: path.resolve(curDir, 'src', 'index.tsx'),
  },
  output: {
    path: path.resolve(curDir, 'docs'),
    filename: '[name].bundle.[contenthash].js',
    clean: true,
  },
  devtool: 'source-map',   // should I delete this?
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(ts|js)x?/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { cacheCompression: false },
        },
      },
    ],
  },
}

and babel.config.js: (and Yes I'm using the syntax of the ES6 module, or ESM if you preferred)

export default {
  presets: [
    '@babel/preset-env',                // I don't know what this one is doing?
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
  ],
}

This is tsconfig.json:

{
  "compilerOptions": {
    "incremental": true,
    "target": "es6",
    "jsx": "preserve",

    "module": "es6",
    "moduleResolution": "node",
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    },
    "resolveJsonModule": true,

    "allowJs": true,

    "noEmit": true,

    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    "strict": false,

    "skipLibCheck": true
  },
  "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "./*.config.*"
  ],
  "exclude": [
      "**/node_modules"
  ]
}

In short I want to the the result similar to run:

npx tsc --watch

and then follows by

npx babel out.js

Thanks in advance.

webpack typescript
1 Answers

From the webpack.config.js you provided, it seems that you were only using babel-loader to transpile your code. This means that the tsc will not be used, and thus that the tsconfig.json is not related to solving your question meant by the title.

How to the result .js of the process "TypeScript --> JavaScript --> Old-Version-JavaScript"?

In your case babel-loader is responsible for both the two arrows. (with the the @babel/preset-typescript from babel.config.js for the first one and @babel/preset-env for the second one)

@babel/preset-env',                // I don't know what this one is doing?

It's going to transpile your javascript code to (possibly) an older version JS based on your browserslist targets. Please refer to the docs for more details: https://babeljs.io/docs/en/babel-preset-env.

Finally, the answer to your question is based on your webpack.config.js, again:

  // ...
  output: {
    path: path.resolve(curDir, 'docs'),
    filename: '[name].bundle.[contenthash].js',
    clean: true,
  },
  // ...

The transpiled result is in the file you specified in this output section. You probably targeted browsers that are too new so nothing need to be transpiled.

user_78136040
Related