如何使用 Parcel-bundler 正确转译？答案

【问题标题】：How to properly transpile with Parcel-bundler?如何使用 Parcel-bundler 正确转译？
【发布时间】：2019-06-29 09:42:28
【问题描述】：

我正在尝试同时转换 .ts (TYPESCRIPT) 和 .scss (SASS) 文件..

出现的问题有两个：

1) 它不会在我的 dist 目录中生成我的文件，它会在 build 文件夹中创建一个 dist 目录。

2) 它正在创建 .js 和 .map 文件，而且它不是模仿 .css 和 .ts 文件。（为什么它会创建其他文件而不是模仿？）

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

【解决方案1】：

使用 Parcel，您无需在 package.json 中有单独的脚本。您只需要向要编译的文件添加引用或导入。例如：

index.html

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

然后您只需从终端运行parcel index.html，或通过 package.json 中的脚本：

"start": "parcel index.html",

或者，如果您直接编译 TS，那么您可以直接在 TS 文件上运行 parcel，例如对于这个文件：

index.ts

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

console.log("Hello World!");

您可以运行parcel index.ts，Parcel 将编译 TS 和引用的 Sass 文件。

【讨论】：

我明白，但是如果我这样做与我正在做的事情是一样的......它会在 build 中生成一个 dist 文件夹......因为这不是我想要的......我已经将 dist 文件夹从构建中删除我只想将转译的文件插入其中.. 怎么做？