As I wrote in here, I created an amoeba-like shape in p5.js and created it in [generator](https://github.com/ mitsuyacider/p5-ameba-generator) was also published. This article is not a how-to. I think the following article is a good reference for how to make it.
References
First npm package release
3 minute npm module
Public Folder
You can register an account with npm and enter your library information in package.json and publish it by npm publish. If you fill in package.json with the following information, the data in the project directory will be stored in the node_ modules.
...
"files": [
"README.md",
"lib"
]
...
In the example above, it’s the data in the README.md and lib folders. So you can write the data you need when the user selects import ameba from 'p5-ameba'. This p5-ameba is determined by the name field of the package, so you don’t need to have a file like p5-ameba.js in the lib folder. So, the js file to be loaded when you run npm install p5-ameba is specified in the main field of package.json.
...
"name": "", // The name to use when installing npm
"main": "", // The file to be loaded when importing
"files": [] // Specify the files to be included in node_modules
...
Import Error
After I managed to publish the package, I decided to use it, so I actually set npm install p5-ameba in another project and tried import ameba from p5-ameba from the js file. Then I got the following error and it can’t be loaded.
Uncaught SyntaxError: Unexpected identifier
I can’t keep my open mouth shut. I’m still learning the front end, so I think it’s probably because I’m missing some knowledge or something** I’m using with a vague knowledge of something. But I haven’t been able to make it into my own technology yet because there are too many terms and so on. I didn’t have a choice, so I followed the cause of the problem a little bit at a time.
verification procedure
- Check that the libraries distributed in the development environment are really working -> Available
- Try to load the distributed library directly in a new project -> it works (same as in the development environment).
- Loading distributed libraries from
node_modules-> Error
I’m not sure why it won’t load when the data is in node_modules, but it seems to be in the process of putting the data in node_modules, or the data itself. The other npm package libraries can be used with import, so the cause may be in the process of putting the data in node_modules or the data itself. I wrote this library with ES2015, so maybe it’s due to the ambiguity of my knowledge of this area, including babel and webpack? I checked it out. What is suspicious is the data output by webpack.
Researching the creation of other packages
The Amoeber’s animation library is based on the animejs library. You specify parameters when you initialize it, etc. So I checked how this package of animejs is made.
Usage
- ES6 modules
- CommonJS
- File include
There are three ways to use the library in the usage of the package, as shown above. Of these, CommonJS…? and I am ashamed to say that I did not know this term. I did a little research and found out that
CommonJS
- One of module management standard.
- The specification to load a library by
require(<module name>). - I found this article helpful.
- It seems to be required when used with node.js, too.
With this in mind, if you look at the package.json of animejs, the creation is as follows.
"umd:main": "lib/anime.min.js",
"module": "lib/anime.es.js",
"main": "lib/anime.js",
"files": [
"lib"
],
The main is followed by umd:. UMD stands for Universal Module Definition, which is defined as follows. (Excerpted from GitHub
The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.
Another unknown term,… AMD stands for Asynchronous Module Definition, which seems to be a standard for loading modules asynchronously. I guess. Another thing is that there is a module field, and the file to which it is loaded points to the ES2015 standard. The npm spec has a
The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require(“foo”), then your main module’s exports object will be returned.
This should be a module ID relative to the root of your package folder.
For most modules, it makes the most sense to have a main script and often not much else.
It is written like this, and it seems that you need to specify a CommonJS standard file in the main field. I looked up this modulefield and found out that here describes it in detail.
The file path in the >”module” field is the code in the ECMAScript module format, and this code should be placed as it is in the import/export format. Read priority.
It looks like a field that specifies a file of code written in ES2015 format.
Exporting the Library for CommonJS
Since the library was created in ES2015 format, it needs to be exported so that it can be treated as a CommonJS file. This may be the reason why you can’t load it.
Build for the library
The configuration of webpack that I used to use does export assets such as js in a form that can be read by the browser, but it doesn’t export them as modules for libraries. The module bundler called Rollup** is suitable for library development and can be converted to CommonJS format. Basically, if you refer to this article, you can even convert it. In the original article, the output format is cjs and CommonJS only, so I think this is OK, but the animejs package I referred to this time is in the umd format, so I also learned from this and created a umd file and used it to create a umd file. I did.
export default {
input: './lib/ameba.es.js',
output: [{
file: './lib/ameba.js',
format: 'umd',
name: "p5-ameba"
}],
external: [
'p5'
]
};
I just changed the field property of format to umd. Now you can build it, create a CommonJS file, and finally use the npm package.
Conclusion
There are still a lot of things we don’t know about the front end, so we don’t know many terms. However, I think I can improve if I do my research. This ameba library is not very useful, but it is a great harvest for me to grasp the whole picture of the package distribution. In the process, I was able to absorb a few unfamiliar words.
By the way, when I was developing the library, I had to do npm publish and publish it, and then create another project and do npm install p5-ameba to check the library.
npm link p5-ameba # In node_modules
npm unlink p5-ameba # Exclude from node_modules
The npm package we created for this project is here.
It’s also available on GitHub.
