Parcel Bundler 美化、整理和创建 .min.js

Question

我是使用 JS 的 automating/testing/bunding 世界的新手，我已经设置了大部分包裹，但我注意到当它构建文件时，它实际上并没有使用 .min.js 部分在文件名中。我想知道是否有一种方法可以做到这一点而不必手动重命名构建文件。

我也在尝试找到一种方法让 parcel 通过原始源文件（您处理的那些文件）并为我整理和美化它们

这是我的 package.json 的样子

{
  "name": "lpac",
  "version": "1.3.1",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "parcel": "^2.0.0-rc.0"
  },
  "scripts": {
    "watch": "parcel watch --no-hmr",
    "build": "parcel build"
  },
  "targets": {
    "lite-maps": {
      "source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
      "distDir": "./path/build/"
    }
  },
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "outputFormat" : "global",
}

我查看了文档，但找不到任何关于使用 parcel 进行 linting 或美化的内容。我该怎么做呢？如果您有这样做的教程链接，也请分享，因为 resources/tutorials 除了基本的观看和构建文件外，其他任何东西似乎都很稀缺

Answer 1

不幸的是，没有开箱即用的设置可以使 parcel javascript 输出看起来像 [fileName].[hash].min.js 而不是 [fileName].[hash].js。 .min.js 扩展名只是将输出文件与源文件区分开来的约定，但是 - 它在运行时间没有影响 - 而 parcel 确实 automatic content hashing makes it easy enough to tell this. And even though they don't have a .min.js extension, these output files are definitely still minified and optimized by default.

但是，如果您真的非常想要这个，那么为所有 javascript 输出添加 .min.js 的包裹编写 Namer plugin 相对简单：

代码如下：

import { Namer } from "@parcel/plugin";
import path from "path";

export default new Namer({
  name({ bundle }) {
    if (bundle.type === "js") {
      const filePath = bundle.getMainEntry()?.filePath;
      if (filePath) {
        let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
        // See: https://parceljs.org/plugin-system/namer/#content-hashing
        if (!bundle.needsStableName) {
          baseNameWithoutExtension += "." + bundle.hashReference;
        }
        return `${baseNameWithoutExtension}.min.js`;
      }
    }
    // Returning null means parcel will keep the name of non-js bundles the same.
    return null;
  },
});

然后，假设上面的代码发布在一个名为 parcel-namer-js-min 的包中，您可以使用 .parcelrc:

将其添加到您的 parcel 管道中

{
  "extends": "@parcel/config-default",
  "namers": ["parcel-namer-js-min", "..."]
}

这里是an example repo where this is working.

你的第二个问题的答案（“有没有办法让 parcel 通过原始源文件（你正在处理的那些文件）并为我整理和美化它们”）不幸的是，没有。

但是，parcel 可以与其他执行此操作的命令行工具并排工作。例如，我的大部分项目都在 package.json 中设置了 format 命令，如下所示：

{
   ...
   "scripts": {
      ...
      "format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern"
   }
   ...
{

您可以轻松地使该命令自动运行 for git commits and push with husky.

Parcel Bundler 美化、整理和创建 .min.js

Parcel Bundler beautify, lint, and create .min.js

javascript

lint

parceljs