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"
  }
}

https://i.sstatic.net/83cII.png

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

Issue: Button ClickEvent is not triggered when the textArea is in onFocus mode

Tips for eliminating contenthash (hash) from the names of JavaScript and CSS files

Is there a possibility that typescript decorators' features will be polyfilled in browsers lacking ES5 support?

How can I arrange a table in Angular by the value of a specific cell?

Completing a fetch promise and sending the outcome to a function that is not awaited

Posting forms in NextJS can be optimized by utilizing onChange and keypress events for input fields

Function in Typescript that accepts either a single object or an array of objects

Locate an element within an array of strings to refine the contents of a flatlist

Exploring the Functionality of Backend Objects in Frontend TypeScript within the MEAN Stack Environment

Using Typescript: ForOf Iteration with Unknown Value Types

Using JavaScript to define an array of objects

Unusual problem with accessing Object values in vscode using typescript

What steps should I follow to set up a TypeScript project that incorporates JavaScript modules compiled from PureScript?

TypeScript encounters a self-referencing type alias circularly

Having difficulty grasping the significance of the data received from the API response

To prevent callback hell in Angular 2 when making multiple HTTP requests

The positioning of CSS arrows using the "top" attribute is not relative to the top of the page when using absolute values

What measures can I take to protect the use of React components that may not be present?

Transfer your focus to the following control by pressing the Enter key

Validate prop must consist of one of two functional components