What are the best practices for transpiling code using Parcel-bundler?

Question

What are the best practices for transpiling code using Parcel-bundler?

Currently, I am attempting to transpile both .ts (TYPESCRIPT) and .scss (SASS) files.

However, I am encountering two main issues:

1) Instead of generating my file in the designated dist directory, it is creating a dist directory within the build folder.

2) Additionally, it is producing .js and .map files but failing to replicate the .css and .ts files. (I'm puzzled as to why it generates these other files but doesn't mimic them.)

PACKAGE.JSON

{
  "scripts": {
    "build": "yarn sass",
    "sass": "parcel watch --no-cache ./scss/*.scss ../../dist/css/index.css",
    "ts": ""
  },
  "devDependencies": {
    "parcel-bundler": "^1.11.0",
    "sass": "^1.17.0"
  },
  "dependencies": {
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1"
  }
}

typescript sass parceljs

Answer 1

Answer №1

Using Parcel eliminates the need for separate scripts in package.json. Instead, you can simply include references or imports to the files you wish to compile. For example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Include your Sass file -->
    <link rel="stylesheet" href="./style.scss" />
  </head>
  <body>
    <!-- Include your TypeScript file -->
    <script src="./index.ts"></script>
  </body>
</html>

You can then execute parcel index.html from the terminal or through a script in your package.json:

"start": "parcel index.html",

If you are compiling TS files directly, you can just use parcel on the TS file itself. For instance, consider the following file:

index.ts

import "style.scss"; // Import Sass file

console.log("Hello World!");

By running parcel index.ts, Parcel will compile both the TypeScript and the associated Sass file.

Answer 2

Using Parcel eliminates the need for separate scripts in package.json. Instead, you can simply include references or imports to the files you wish to compile. For example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Include your Sass file -->
    <link rel="stylesheet" href="./style.scss" />
  </head>
  <body>
    <!-- Include your TypeScript file -->
    <script src="./index.ts"></script>
  </body>
</html>

You can then execute parcel index.html from the terminal or through a script in your package.json:

"start": "parcel index.html",

If you are compiling TS files directly, you can just use parcel on the TS file itself. For instance, consider the following file:

index.ts

import "style.scss"; // Import Sass file

console.log("Hello World!");

By running parcel index.ts, Parcel will compile both the TypeScript and the associated Sass file.

What are the best practices for transpiling code using Parcel-bundler?

Answer №1

Similar questions

FilterService of PrimeNg

Encountering SUID Sandbox Helper Issue When Running "npm start" on WSL with Electron and Typescript

Getting started with installing Bootstrap for your Next.Js Typescript application

Chrome fails the karma tests while phantomjs passes them

What is the best way for me to bring in this function?

The module 'DynamicTestModule' has imported an unexpected directive called 'InformationComponent'. To resolve this issue, please include a @NgModule annotation

Iterate over a collection of HTML elements to assign a specific class to one element and a different class to the remaining elements

Can a decorator be added to a Typescript class after it has been created?

PrimeNG's Angular component pTree TreeNode

What could be causing the issue of my application not being able to operate on the specified port on Heroku?

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

Is TypeScript declaration merging not functioning properly?

Exploring ways to list interface keys in order to create a new interface where the value is determined by the corresponding key

What is the approach to forming a Promise in TypeScript by employing a union type?

Attempting to adhere to the prescribed Cypress tutorial is resulting in various errors related to being "compiled under '--isolatedModules'"

Angular Error: Trying to access a property on an undefined variable

Understanding the Typescript Type for a JSON Schema Object

What is the best way to sequentially invoke methods in Angular?

Is there a source where I can locate type definitions for Promise objects?

Combining indexed types with template literals -- add a prefix to each key