How to compile TypeScript/Less files into JavaScript/CSS by using webpack and Babel?

Question

Currently, I am developing a package and going to publish it in npm, I wrote it with TypeScript but faced some problems in package bundling.

I put my codes (TypeScript/Less files) in src and the structure shows below:

src
├── components
│   ├── table.less
│   └── table.tsx
├── index.tsx
└── utils
    └── mock.tsx

Since I want to publish it in npm, so I need it be compiled to JavaScript/CSS files (in lib folder) so that other developers can import it directly (without extra compiling in their project), the structure should be like this:

lib
├── components
│   ├── table.css
│   └── table.js
├── index.js
└── utils
    └── mock.js

But I faced some problems:

1. If I use tsc command, tsx files can be compiled to js files rightly, but less files will be ignored;
2. If I use webpack commands rather that tsc, the result will be bundled in one file, and lost it's original structure, and it will confuse package users;

I think I need to make it works by:

1. Compile all files from src to lib one by one(Keep the same folder structure);
   • tsx files to js files;
   • less files to css files;
   • add declaration files such as index.js.d.ts and index.css.d.ts;
   • modify some writing styles such as import styles from './index.less' to import styles from './index.css'; Or inject stylesheets into js files directly; (I am not sure about this step)
2. Bundle one js file with all of things in it (with webpack), as well as minimized version;

The package contains JSX grammar since I used React in it.

As I know, I need to use Babel in compiling TS/JS codes, and webpack in compiling less and other assets, but I am confused about how to combine them in working together.

So any suggestions on how to combine cool tools in solving my problem? I looked through really a lot tutorials but most of them are React/Less/TypeScript Project (not package development) or TypeScript package (without using less/css).

Thanks really a lot.

Answer 1

This question has been around for a long time, I hope my answer can still help people who click in to find the answer:

As you said, .tsx files can be compiled by tsc into .ts files, but .scss or .less not. so you need to use node-sass or less to process them.

Based on your directory structure above, you can write the following commands under scripts in package.json:

if you use less:

"scripts": {
  "build:css": "lessc src/components/table.less lib/components/table.css"
}

or node-sass:

"scripts": {
  "build:css": "node-sass -r src -o lib"
}

Yes, node-sass scans the root folder and automatically compiles the .scss files in it into .css files in the corresponding directory. Using less may require you to spend more time exploring the useful methods.

But just converting to css files doesn't help, because the style files introduced in the js files still have .less or .scss suffixes, we need to replace this part of the .js file, you may think of using node to read each .js file, and then use the regular match, this idea is generally no problem, but the global matching of the regular replacement can cause some hidden problems (although almost impossible), so I use AST to do the replacement.

Yes, I wrote an easy-to-use command line tool for this, you just need to:

npm i tsccss -D

and add npm script:

"scripts": {
  "build:css": "node-sass -r src -o lib",
  "compile": "tsc -p tsconfig.json && tsccss -o lib",
  "build": "npm run build:css && npm run compile"
}

Yes, as you can see, tsccss -o lib is completely enough.

Hope you enjoy it, here is github/repo: tsccss