Are there scripts to transpile typescript component projects to js?

[RamWebDev]

Are there scripts to transpile typescript component projects to js? If I try to publish typescript components, then they get packaged as tsx and ts files and gets posted to NPM registry and won't be consumable in React Js (Javascript based) projects. So is there a way or do you have any scripts or commands that would transpile the typescript component to js packages and then one can post the same to NPM registry (along with related styles and images) ?

[RamWebDev]

Please help @F1LT3R and @pmoleri

[pmoleri]

Hi @RamWebDev CRA doesn't provide such option, nor this project. When I faced the same problem I went with rollup, I'll share here tomorrow my rollup configuration.

[pmoleri]

Hi @RamWebDev , this is my setup to use a component library in a different project (i.e. publish to npm to use in another project that is not part of the current workspace):

rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from 'rollup-plugin-node-resolve';
import nodeBuiltins from 'rollup-plugin-node-builtins';
import url from 'rollup-plugin-url';
import svgr from '@svgr/rollup';

import pkg from './package.json';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true
    },
    // Enable to create ES-modules output
    {
      file: pkg.module,
      format: 'es',
      exports: 'named',
      sourcemap: true
    },
  ],
  plugins: [
    external(), // Set peerDependencies as external
    postcss({
      modules: false
    }),
    url(),
    svgr(),
    nodeBuiltins({ crypto: false }),
    resolve({
      extensions: ['.ts', '.tsx', '.mjs', '.js', '.json', '.node'],
      preferBuiltins: true,
    }),
    typescript({
      rollupCommonJSResolveHack: true,
      clean: true
    }),
    commonjs({
      namedExports: {   // manually add exports that the plugin fails to identify automatically
        'uuid': ['v1', 'v4'],
      },
    })
  ]
}

package.json

  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "source": "src/index.ts",
  "main:src": "src/index.ts",
  "types": "dist/index.d.ts",
  "scripts": {
    "clean": "shx rm -rf dist/*",
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "prepack": "yarn run build"
  },
  "devDependencies": {
    "@svgr/rollup": "^4.3.2",
    "@types/jest": "^23.1.5",
    "@types/react": "^16.0.31",
    "@types/react-dom": "^16.0.3",
    "babel-core": "^6.26.3",
    "babel-runtime": "^6.26.0",
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "rollup": "^1.17.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-typescript2": "^0.22.0",
    "rollup-plugin-url": "^2.2.2",
    "typescript": "^3.4.5"
  },
  "files": [
    "dist"
  ],
  "eslintConfig": {
    "extends": "react-app"
  }

I hope this helps.

[F1LT3R]

@pmoleri thanks for the solution!