Parcel’s out-of-the-box nature saves us a lot of time to initialize the project, but the zero-configuration nature makes it difficult to do some preprocessing, so this article takes you through some of the problems we often encounter. Most of our special cases are satisfied by simply adding a few parameters.

In the last year, Parcels did not support SourceMap features, which prevented breakpoint debugging, and many teams did not use parcels in production. Now parcels support SourceMap features, Plus, it’s easy to write plug-ins to fill in custom functionality, so I think Parcel is ready for production on new projects.

Read on to see how you can use a simple example of a package-plugin-change-file plug-in to do just that.

This article doesn’t go into the basics of using Parcel, but if you haven’t already done Parcel, please do: Official Documentation for Parcel – Get Started quickly

How do I skip files that don’t need to be packaged?

If you use the parcel index. HTML command, parcel automatically recognizes the reference in the HTML and does not package it if it is http://. If it is a local file, parcel recognizes it as an Assets object and packages it.

If we need to skip the packing of local files, we can use the packing-plugin-change-file plug-in

$ yarn add -D parcel-plugin-change-file
Copy the code

Add
, notice there are two brackets here.

<body>
  <! --[ <script src="lodash.min.js"></script> ]-->
</bodt>
Copy the code

When the project is finished compiling, the plug-in puts
opens the comment content to skip Parcel’s packing detection.

<body>
  <script src="lodash.min.js"></script>
</bodt>
Copy the code

How do I modify HTML?

For example, we tried to modify the title of index.html based on information in package.json

Create a package-plugin-change-file.js file in the project and path

const package = require('./package.json')
module.exports = {
  html: [package.name],
};
Copy the code

Add
where I corresponds to the array subscript in the previous HTML object, here we only have one, so use 0

<header> <title><! -- parcel-plugin-change-file-0 --></title> </header>Copy the code

When the project is compiled, the plug-in inserts the name information from package.json into the title

<body>
  <title>Parcel Elegant configuration</title>
</bodt>
Copy the code

How do I copy some files to the package directory after a parcel is packaged?

For example, in some cases we don’t need a Parcel to help us process PNG images and we want to use the image path directly:

class Banner extends React.Componet {
  render(){
    return <div style={{
      backgoundImage:'img/test.png'}} ></div>}}Copy the code

Then we need to copy the image to the corresponding path after packaging.

Make sure that parcel-plugin-change-file is installed and create parcel-plugin-change-file.js in the project and path

module.exports = {
  copy: ['src/assets'.'src/documents']};Copy the code

Executing the Parcel packaging script normally copies the SRC /assets and SRC/Documents children to the same path as the packaging output

$ parcel src/index.html
Copy the code

How to achieve andwebpack.DllPluginWhat about the same effect of precompilation?

Webpack’s DllPlugin can precompile infrequently modified libraries into a file and then reference them in the project. Webpack is configured not to compile the compiled files again. This can greatly speed up the usual compilation time. To catch up with Parcel’s packing speed.

In a Parcel, it’s also possible to pre-compile infrequently modified libraries into a file so that subtracting most of the compilation content from the Parcel’s already fast compilation can greatly speed up the usual compilation time, but only with global object references.

In a Parcel project, it is possible to use global objects, such as lodash in HTML:

<body>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.9/lodash.min.js"></script>
</body>
Copy the code

At this point, the import _ from ‘lodash’ is not needed in the project, and the global _ object is recognized

console.log(_.map)  // The _.map method can be printed
Copy the code

With the knowledge above, we can do the following:

  1. Create a pre-packaged file:
// DLL /default.js // assume that these libraries are self-written libraries that need to be precompiled and reference import _ from globally'lodash';
import Immutable from 'immutable'; // Expose the global object window['_'] = _;
window['Immutable'] = Immutable;

Copy the code
  1. Parcel is used for packaging, wherechangeFile=falseDo not use the package-plugin-change-file plugin:
$ changeFile=false parcel build dll/default.js -d src/dll -o defalut.min.js
Copy the code

Now that the default.min.js above has been created, it’s time to use it in your usual Parcel’s project

  1. We need to startsrc/index.htmlIn the introductionsrc/dll/default.min.js
<head>
    <! --[ <script src="default.min.js"></script> ]-->
</head>
Copy the code
  1. Create a parcel – the plugin – change – file. Js
module.exports = {
  copy: ['src/dll']};Copy the code
  1. You’re done, you can use it directly in the project beforedefault.min.jsThe exposure to thewindowGlobal object under
// src/index.js
_.map(_.range(500), v=>{
  console.log(`hello:${v}`);
})
Copy the code
  1. If you need a hint, write a.d.ts file and introduce it in your project

Check out the typescript Declaration Files documentation for this information

/// <reference path="./your-edit.d.ts"/>
Copy the code

Launch project:

$ parcel src/index.html
Copy the code

Finally, if this article has helped you, welcome Star:parcel-plugin-change-file