如何在 Parcel 中设置开发和生产目标

Question

任何人都可以阐明“目标”在包裹中的工作方式，或者至少如何分离未启示的开发和缩小产品文件。稀疏的文档只是提出了进一步的问题，没有任何谷歌搜索会找到解决方案。我是包裹的新手，也是较新的JavaScript语法的模块化性质。

当我注意到包裹手表不会缩小/uglife JS时，这一切就开始了，我不希望它最终进入产品服务器。但是包裹构建将缩小/uglife JS。因此，如果我的开始脚本可以将文件捆绑到 build/wp-content/themes/yourproject/yourproject/assets--dev 和 build> build 脚本可以将文件捆绑到 build/wp-content/themes/yourproject/Assets 中。这样，我可以将 Assets-dev 放入.gitignore中，并在构建网站时使用这些。还是那是实现这一目标的正确方法？在Gulp中，您只能定义不同的任务或创建一个任务来完成这两个输出，但是我找不到在包裹中执行此操作的方法。

该项目的描述 - 这是一个WordPress站点，因此我不一定将包裹源HTML文件扫描。包裹实际上只是捆绑了JS和SCSS文件，我们正在替换旧的Gulp设置。 包装中

{
  "name": "localtesting2",
  "version": "1.0.0",
  "description": "## Overview",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets--dev",
    "build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "smoothscroll-polyfill": "^0.4.4"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.3.2",
    "autoprefixer": "^10.4.2",
    "parcel": "latest",
    "parcel-bundler": "^1.12.5",
    "parcel-resolver-ignore": "^2.0.0",
    "postcss": "^8.4.6",
    "postcss-modules": "^4.3.0",
    "sass": "^1.49.8",
    "webfontloader": "^1.6.28"
  },
  "targets": {
    "default": {
      "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
      "distDir": "build/wp-content/themes/yourproject/assets"
    }
  },
  "parcelIgnore": [
    "images/*.*",
    "webfonts/*.*"
  ]
}

因此

。

在

， - build/wp-content-

等所有WordPress核心/主题文件最终最终会在服务器上显示的

Dev Directory看起来像这样，基本上只是持有JS和CSS的源代码，这些源代码被编译到主题中：

在“脚本” 中，我尝试设置“启动”和“构建”，无论有没有 - dist-dir flag。然后，我从package.json中删除“ targets” 对象。

对于“ Targets” ，我找不到有关此处确切的文档/示例，因此我只是尝试了我能想到的任何东西。我已经尝试了以下所有内容，但是没有什么能像我打算这样做的方式。包裹选择 Assets-dev 或资产并编译那里的所有内容，它不会分开代码。有时，它只会将文件编译到我不使用的 dist 文件夹中。

"targets": {
    "start": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

"targets": {
    "watch": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

"targets": {
    "default": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

"targets": {
    "dev": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "prod": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

最终，我正在寻找如何将未启示资产的资产放入一个可以加载的一个文件夹中，并将资产缩小到另一个文件夹中，该文件夹将加载在Prod Server上。

Answer 1

我发现了。包装的“脚本”部分中的CLI命令。JSON可以包含 - 目标标志。这样，您可以命名目标，然后在“目标”属性中定义它。这是工作包。JSON：

{
  "name": "localtesting2",
  "version": "1.0.0",
  "description": "## Overview",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target default",
    "build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "smoothscroll-polyfill": "^0.4.4"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.3.2",
    "autoprefixer": "^10.4.2",
    "parcel": "latest",
    "parcel-bundler": "^1.12.5",
    "parcel-resolver-ignore": "^2.0.0",
    "postcss": "^8.4.6",
    "postcss-modules": "^4.3.0",
    "sass": "^1.49.8",
    "webfontloader": "^1.6.28"
  },
  "targets": {
    "default": {
      "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
      "distDir": "build/wp-content/themes/yourproject/assets"
    }
  },
  "parcelIgnore": [
    "images/*.*",
    "webfonts/*.*"
  ]
}

尽管必须有一个更好的工作流程，或者也许是一种获取观看命令的方法，以缩小所有内容，例如 build> build do。