Configuring Package.json<\/strong><\/h2>\n\n\n\nIn the last blog, I explain how to create and use the library\/plugin. Lets recap important things to do before publishing into npm <\/p>\n\n\n\n
After we build library\/plugin files into dist<\/code> folder, we have to update our package.json <\/code><\/p>\n\n\n\nLet us add the main entry point in packge.json file<\/p>\n\n\n\n
\"main\": \".\/dist\/lib.umd.min.js\",<\/code><\/pre>\n\n\n\nNow let’s whitelist what are the files needed when someone is using them inside their node_modules<\/code>. Here we need to include only dist<\/code> folder from our project.<\/p>\n\n\n\n\"files\": [ \"dist\/*\"],<\/code><\/pre>\n\n\n\nPushing compiled source code is the right way to publish in NPM. Users usually won’t edit this code. if they want to make changes, they can fork from version control systems (like Github).
In case you want to include all files, we add like below<\/p>\n\n\n\n
\"files\": [\n \"dist\/*\",\n \"src\/*\", \n \"folder\/*\",\n],<\/code><\/pre>\n\n\n\nLet’s add additional details like author details and license also into the package.json<\/p>\n\n\n\n
{\n \"name\": \"sb-vue-component-library\",\n \"version\": \"0.1.0\",\n \"private\": false,\n \"license\": \"MIT\",\n \"author\": { \n \"name\" : \"Shabeeb K\",\n \"email\" : \"mail@shabeebk.com\",\n \"url\" : \"http:\/\/shabeebk.com\/\"\n },\n \"main\": \".\/dist\/lib.umd.min.js\",\n \"files\": [ \"dist\/*\"],\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\",\n \"build:lib\": \"vue-cli-service build --name lib --target lib --dest dist src\/lib-setup.js\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.8.3\",\n \"vue\": \"^2.6.14\"\n },\n \"devDependencies\": {\n \"@babel\/core\": \"^7.12.16\",\n \"@babel\/eslint-parser\": \"^7.12.16\",\n \"@vue\/cli-plugin-babel\": \"~5.0.0\",\n \"@vue\/cli-plugin-eslint\": \"~5.0.0\",\n \"@vue\/cli-service\": \"~5.0.0\",\n \"eslint\": \"^7.32.0\",\n \"eslint-plugin-vue\": \"^8.0.3\",\n \"vue-template-compiler\": \"^2.6.14\"\n },\n \"peerDependencies\": {\n \"vue\": \"^2.6.14\"\n }\n}\n<\/code><\/pre>\n\n\n\nWhat are these fields if you wonder<\/p>\n\n\n\n
- name: Name of the component<\/li>
- version: the version number of our plugin\/library. You will have to increment this number every time you publish an update for your package. usually we follow semantic versioning <\/a><\/li>
private<\/code> : This means your package is public (i.e. everyone is able to see and install it).<\/li>- license: license for our package<\/li>
- author: author details<\/li>
- main: \u00a0The primary entry point to our plugin.<\/li>
- files: specifies which files should be published on NPM.<\/li><\/ul>\n\n\n\n
For more details please refer npmjs<\/a><\/p>\n\n\n\nAdd license file <\/h2>\n\n\n\n
In GitHub, it’s easy to add a license, If you are using MIT license, <\/p>\n\n\n\n
Click on add file in GitHub and name it as License.md<\/code><\/p>\n\n\n\n![\"\"](\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-02-at-6.11.19-PM.png\")
![\"\"](\"http:\/\/shabeebk.com\/blog\/wp-content\/plugins\/jquery-image-lazy-loading\/images\/grey.gif\")
![\"\"](\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-02-at-6.08.03-PM.png\")
![\"\"](\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-02-at-6.19.52-PM.png\")
![\"\"](\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-02-at-6.21.17-PM.png\")
dist<\/code> folder, we have to update our package.json <\/code><\/p>\n\n\n\nLet us add the main entry point in packge.json file<\/p>\n\n\n\n
\"main\": \".\/dist\/lib.umd.min.js\",<\/code><\/pre>\n\n\n\nNow let’s whitelist what are the files needed when someone is using them inside their node_modules<\/code>. Here we need to include only dist<\/code> folder from our project.<\/p>\n\n\n\n\"files\": [ \"dist\/*\"],<\/code><\/pre>\n\n\n\nPushing compiled source code is the right way to publish in NPM. Users usually won’t edit this code. if they want to make changes, they can fork from version control systems (like Github).
In case you want to include all files, we add like below<\/p>\n\n\n\n
\"files\": [\n \"dist\/*\",\n \"src\/*\", \n \"folder\/*\",\n],<\/code><\/pre>\n\n\n\nLet’s add additional details like author details and license also into the package.json<\/p>\n\n\n\n
{\n \"name\": \"sb-vue-component-library\",\n \"version\": \"0.1.0\",\n \"private\": false,\n \"license\": \"MIT\",\n \"author\": { \n \"name\" : \"Shabeeb K\",\n \"email\" : \"mail@shabeebk.com\",\n \"url\" : \"http:\/\/shabeebk.com\/\"\n },\n \"main\": \".\/dist\/lib.umd.min.js\",\n \"files\": [ \"dist\/*\"],\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\",\n \"build:lib\": \"vue-cli-service build --name lib --target lib --dest dist src\/lib-setup.js\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.8.3\",\n \"vue\": \"^2.6.14\"\n },\n \"devDependencies\": {\n \"@babel\/core\": \"^7.12.16\",\n \"@babel\/eslint-parser\": \"^7.12.16\",\n \"@vue\/cli-plugin-babel\": \"~5.0.0\",\n \"@vue\/cli-plugin-eslint\": \"~5.0.0\",\n \"@vue\/cli-service\": \"~5.0.0\",\n \"eslint\": \"^7.32.0\",\n \"eslint-plugin-vue\": \"^8.0.3\",\n \"vue-template-compiler\": \"^2.6.14\"\n },\n \"peerDependencies\": {\n \"vue\": \"^2.6.14\"\n }\n}\n<\/code><\/pre>\n\n\n\nWhat are these fields if you wonder<\/p>\n\n\n\n
- name: Name of the component<\/li>
- version: the version number of our plugin\/library. You will have to increment this number every time you publish an update for your package. usually we follow semantic versioning <\/a><\/li>
private<\/code> : This means your package is public (i.e. everyone is able to see and install it).<\/li>- license: license for our package<\/li>
- author: author details<\/li>
- main: \u00a0The primary entry point to our plugin.<\/li>
- files: specifies which files should be published on NPM.<\/li><\/ul>\n\n\n\n
For more details please refer npmjs<\/a><\/p>\n\n\n\nAdd license file <\/h2>\n\n\n\n
In GitHub, it’s easy to add a license, If you are using MIT license, <\/p>\n\n\n\n
Click on add file in GitHub and name it as License.md<\/code><\/p>\n\n\n\n