DEV Community

Amazing
Amazing

Posted on

Lab 10: Release my tool on NPM

My tôl have finally released on npm and let's me tell you it has been struggled for me due to my set up

Read the doc properly

I was rushing to finish this lab but that what actually slow me down like a lot. First I come in to my project changing my package,json to build the project

"build": "tsc -p ."
Enter fullscreen mode Exit fullscreen mode

Then after that, I add bin to indicate the entry point of my tool or I can say ask the computer to run that exact file when running my tool.

"bin": {
    "ts_ssg": "./lib/index.js"
  }
Enter fullscreen mode Exit fullscreen mode

Here come the trouble

So I run the build and then use npm link ts_ssg to test out my tools, it run fine inside the tool repo but when I come outside and try to run it but then an error come up

Error: ENOENT: no such file or directory, copyfile 'src/styles/index.css' -> 'dist/index.css'
    at Object.copyFileSync (fs.js:2061:3)
    at Object.<anonymous> (C:\Users\Administrator\Desktop\repo\TS-SSG\lib\index.js:35:4)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)   
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  errno: -4058,
  syscall: 'copyfile',
  code: 'ENOENT',
  path: 'src/styles/index.css',
  dest: 'dist/index.css'
}
Enter fullscreen mode Exit fullscreen mode

It basically say that the src/styles/index.css path could not resolve because I'm using a relative path and that path did not exist in the parent level so I have to chance it to an absolute path so I made the change in my index.ts

fs.copyFileSync(path.resolve(__dirname, '../styles/index.css'), `${outputDir}/index.css`);
Enter fullscreen mode Exit fullscreen mode

I also decide to move the styles/index.css to the equal level with the src folder and the lib folder (the build version) so the path to the index.css is identical for both of the version.

Then after that problem solved I got 2 other things coming up when trying to publish my tools to npm. First thing would be having an unique name for my package so I came in the package.json and change it

"name": "ts_ssg"
Enter fullscreen mode Exit fullscreen mode

Then the second thing would be confirmed my newly created npm account. But first I upload the test version first by pumping the minor version using npm version minor and then push my commit to Github using git push --follow-tags. I thought that would be it but my CI failed and after looking at the log I regconized that my build come out with test folder being emptied out so I made the final change to not include the __test__ folder when running build by adding these in tsconfig.json

"include": ["src/*.ts"],
"exclude": ["src/__tests__"]
Enter fullscreen mode Exit fullscreen mode

Then after I was happy about it I publish a couples more minor version then decide to pump the major version to npm version major .You can test my tool out here

Discussion (0)