时间戳

首页 > 解决方案 > 如何使用 Parcel-bundler 正确转译？

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

问题描述

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

出现的问题有两个：

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

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

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

在此处输入图像描述

标签： typescriptsassparceljs

解决方案

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

索引.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，那么您可以直接parcel在 TS 文件上运行，例如对于这个文件：

索引.ts

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

console.log("Hello World!");

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

推荐阅读