{"id":21045529,"url":"https://github.com/ymzuiku/parcel-plugin-change-file","last_synced_at":"2025-05-15T18:30:34.781Z","repository":{"id":54146899,"uuid":"141826128","full_name":"ymzuiku/parcel-plugin-change-file","owner":"ymzuiku","description":"parcel 的文件处理插件 \\  Jump parcel bundler in html \u0026 Replace html string \u0026 Copy files at parcel builded","archived":false,"fork":false,"pushed_at":"2021-03-07T23:26:17.000Z","size":111,"stargazers_count":16,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-18T04:59:45.411Z","etag":null,"topics":["parcel","parcel-plugin","react","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ymzuiku.png","metadata":{"files":{"readme":"README-cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-21T15:49:51.000Z","updated_at":"2023-05-16T15:47:33.000Z","dependencies_parsed_at":"2022-08-13T07:31:36.347Z","dependency_job_id":null,"html_url":"https://github.com/ymzuiku/parcel-plugin-change-file","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fparcel-plugin-change-file","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fparcel-plugin-change-file/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fparcel-plugin-change-file/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Fparcel-plugin-change-file/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ymzuiku","download_url":"https://codeload.github.com/ymzuiku/parcel-plugin-change-file/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225366825,"owners_count":17463094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["parcel","parcel-plugin","react","vue","webpack"],"created_at":"2024-11-19T14:22:59.475Z","updated_at":"2024-11-19T14:23:00.122Z","avatar_url":"https://github.com/ymzuiku.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Parcel 有着开箱即用的特性, 为我们初始化工程省却了许多时间, 但是零配置的特性导致我们比较不方便进行一些预处理, 这篇文章就带领读者解决一些我们常会遇到的一些问题. 只需要很简单的添加几个参数,就可以满足我们大部分的特殊情况.\n\n在去年, Parcel 没有支持 SourceMap 的特性, 导致于无法进行断点调试, 从而很多团队没有在生产中使用 Parcel, 现在 Parcel 已经支持 SourceMap 的特性, 再加上可以很方便的编写插件去填补一些自定义的功能, 所以 Parcel 我认为已经可以在新项目的生产中投入使用了.\n\n本文作者简单的编写了一个 `parcel-plugin-change-file` 插件示例, 来满足下面的功能, 具体使用请继续阅读文章内容.\n\n本文不会对 Parcel 的基础使用再多做解释, 如果您还没有接触过 Parcel ,请先去了解: [Parcel 官方文档-快速开始](https://zh.parceljs.org/getting_started.html)\n\n## 如何跳过不需要打包的文件?\n\n如果我们使用 `parcel index.html` 命令, Parcel 会自动识别html中的引用,如果是`http://`就不会进行打包处理, 如果是本地文件,就会识别成Assets对象,进行打包.\n\n如果我们需要跳过对本地文件的打包, 我们可以使用 `parcel-plugin-change-file` 插件\n\n```\n$ yarn add -D parcel-plugin-change-file\n```\n\n在 index.html中添加 `\u003c!--| your-code |--\u003e` , 注意这里有两个中括号.\n\n```html\n\u003cbody\u003e\n  \u003c!--| \u003cscript src=\"lodash.min.js\"\u003e\u003c/script\u003e |--\u003e\n\u003c/bodt\u003e\n```\n当项目编译结束之后, 该插件会把 `\u003c!--| your-code |--\u003e` 的注释内容打开,从而跳过 Parcel 的打包检测.\n```html\n\u003cbody\u003e\n  \u003cscript src=\"lodash.min.js\"\u003e\u003c/script\u003e\n\u003c/bodt\u003e\n```\n\n## 如何对html进行修改?\n例如, 我们尝试根据 `package.json` 中的信息修改 `index.html` 的 `title`\n\n在项目跟路径创建 parcel-plugin-change-file.js 文件\n\n```js\nconst package = require('./package.json')\nmodule.exports = {\n  html: [package.name],\n};\n```\n在 `src/index.html` 中添加 `\u003c!-- parcel-plugin-change-file-i --\u003e` , 其中 `i` 对应之前 `html` 对象中的数组下标, 这里我们只有一个, 所以用 `0`\n```\n\u003cheader\u003e\n  \u003ctitle\u003e\u003c!-- parcel-plugin-change-file-0 --\u003e\u003c/title\u003e\n\u003c/header\u003e\n```\n\n当项目编译结束之后, 该插件会把 `package.json` 中的 `name` 信息插入到 `title`\n```html\n\u003cbody\u003e\n  \u003ctitle\u003eParcel优雅配置\u003c/title\u003e\n\u003c/bodt\u003e\n```\n\n## 如何在parcel打包结束之后拷贝一些文件到打包目录?\n\n例如, 某些情况, 我们不需要 Parcel 帮我们处理 `png` 图片, 我们希望直接使用图片路径:\n```js\nclass Banner extends React.Componet {\n  render(){\n    return \u003cdiv style={{\n      backgoundImage:'img/test.png'\n    }} \u003e\u003c/div\u003e\n  }\n}\n```\n那我们就需要在打包之后再把图片拷贝到相应的路径.\n\n还是确保`parcel-plugin-change-file` 已被安装, 然后在项目跟路径创建`parcel-plugin-change-file.js`\n\n```\nmodule.exports = {\n  copy: ['src/assets', 'src/documents'],\n};\n```\n\n正常执行 Parcel 打包脚本, 就会把 `src/assets` 和 `src/documents` 的**子内容**拷贝到打包输出的**跟路径**\n```\n$ parcel src/index.html\n```\n\n\n## 如何达到和 `webpack.DllPlugin` 一样的预先编译的效果呢?\n\nWebpack 的 DllPlugin 插件可以把一些不常进行修改的库提前编译成一个文件, 然后在项目里引用, 经过配置webpack不会再次编译这些已经编译过的文件.这样可以大大的加速平时编译的时间. 从而赶上 Parcel 的打包速度.\n\n而在 Parcel 中,也可以可以把一些不常进行修改的库提前编译成一个文件, 这样可以在 Parcel 原本就快速的编译前提下再减去绝大部分的编译内容, 从而极大的加速平时编译的时间, 不过就只能使用全局对象引用了.\n\n在Parcel项目中, 是可以使用全局对象的, 例如我们在html中引入一个lodash:\n\n```html\n\u003cbody\u003e\n    \u003cscript src=\"https://cdn.bootcss.com/lodash.js/4.17.9/lodash.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n此时, 在项目中不需要`import _ from 'lodash'`, 可以识别全局`_`对象的\n```js\nconsole.log(_.map)  //可以打印出 _.map 方法\n```\n### 有了以上知识点,我们可以这样做:\n\n1. 创建一个预先需要打包的文件:\n\n```\n// dll/default.js\n// 假设这些库是自己编写的库, 需要在预编译, 并且在全局引用\nimport _ from 'lodash';\nimport Immutable from 'immutable';\n\n// 暴露到全局对象中\nwindow['_'] = _;\nwindow['Immutable'] = Immutable;\n\n```\n\n2. 使用Parcel进行打包, 其中`changeFile=false` 是不使用 parcel-plugin-change-file 插件:\n\n```\n$ changeFile=false parcel build dll/default.js -d src/dll -o defalut.min.js\n```\n\n以上 `default.min.js` 已经创建好了, 接下来是在平时 Parcel 的项目中使用它\n\n3. 我们需要在 `src/index.html` 里引入 `src/dll/default.min.js`\n\n```html\n\u003chead\u003e\n    \u003c!--| \u003cscript src=\"default.min.js\"\u003e\u003c/script\u003e |--\u003e\n\u003c/head\u003e\n```\n\n4. 创建parcel-plugin-change-file.js\n\n```js\nmodule.exports = {\n  copy: ['src/dll'],\n};\n```\n\n5. 大功告成,可以在项目里直接使用\b之前 `default.min.js` 中暴露在 `window` 下的全局对象\n\n```\n// src/index.js\n_.map(_.range(500), v=\u003e{\n  console.log(`hello:${v}`);\n})\n```\n\n6. 如果需要有提示, 需要编写 .d.ts 文件, 然后在项目中引入\n\n这一块知识点请查阅 [typescript Declaration Files 文档](http://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html)\n\n```\n/// \u003creference path=\"./your-edit.d.ts\"/\u003e\n```\n\n启动项目:\n```\n$ parcel src/index.html\n```\n\n#### 最后, 如果这篇文章有帮到你, 欢迎 Star: [parcel-plugin-change-file](https://github.com/ymzuiku/parcel-plugin-change-file)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Fparcel-plugin-change-file","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fymzuiku%2Fparcel-plugin-change-file","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Fparcel-plugin-change-file/lists"}