I’m building a TypeScript package to be published on NPM. I’ll be consuming this package in future web development projects likely using Vite. When I build a future website with this module, does it matter if it’s already bundled? Won’t Rollup (used by Vite to build the website) bundle the code regardless of whether the code on NPM is bundled (like in a lib.esm.js file)? Why not just use TSC (TypeScript Compiler) to compile TS to JS for NPM and then let the consuming project (whether Rollup or Webpack or Parcel) bundle it optimizing for the browser?
What am I missing that other NPM authors know?
Note, I’m authoring this package as strictly an ESM Module (type: module) so I’m not worrying about CJS.
You’re right. You don’t need to bundle it. Just transpile each file individually from the source directory to the output directory and point your package.json’s main to the transpiled entry point. Use Babel directly.
An example of this is react-markdown.
Related
I'm trying to build an npm package to standardize my layout components that use geist components at their core. At first, I tried to use the npm package as if it was a local component but it throws a webpack loader error when it tries to read the component for example:
Module parse failed: Unexpected token (6:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const Badged = ({ content }) => {
| return (
> <Badge>
| <b>{content}</b>
| </Badge>
After reading around a bit it seems I need something like webpack or rollup to build everything to a dist folder in my npm package. How can I set up a pipeline to consume the type data from the source package and build my components to a dist folder?
As a rule of thumb, Webpack is used as an application bundler while Rollup is used as a library bundler. The reason for this is that, historically, Rollup could produce tree-shakable ESM Module output. Webpack recently added support for ESM output.
The general steps for library development are:
Setup a bundler like Rollup, etc.
Configure it to produce both ESM and Common.js output in the dist folder.
When publishing the package, ensure that dist is added to files or at least not added to npmignore list.
Always published a compiled code. The main or entry field should point to the compiled code's entry file.
When publishing a library, make use of externals to exclude all third-party node_modules from your bundle so that they are explicitly installed on users side and your library contains only your code. Nearly all bundlers support this feature.
I am learning to use webpack and generally getting in to the Javascript world, including npm.
Several answers deal with --save vs --save-dev when using npm install. My understanding is that their use (and updates to package.json) is actually useful when recreating either a run or a dev environment via npm install <the package being developed or ran>
--save is used to save packages needed to run the app in node.js, that is on a server
--save-dev is used to save packages needed to develop the app
a bare npm install <module> just installs the package, without enabling the possibility to install it somewhere else though the appropriate entry in package.json
Therefore, in a webpack context, is --save ever used? I belive not, because what is created is a JS bundle which is then included in the HTML file, and ran in a browser. In that sense, there is never a need to "save modules needed to run your app".
In the same vein, --save-dev is useful (again, in a webpack context) at it allows someone to develop elsewhere (in that case both modules in the app (say, moment.js) and logistical ones (say, gulp) should be installed with --save-dev, right?)
Finally, a bare npm install <module> is also possible (although less useful) is the development is not intended to be done elsewhere (the modules are still installed but no mention of this fact is made in package.json).
Is this correct? Specifically, is the assumption of a lack of --save in a webpack context true?
Anything that it utilised in the production build of your application should be listed in save. For example if you use React, your application utilises React in the final production build. It doesn't matter that your file is bundled but the fact that it's heavily relied upon running when compiled.
Anything that is used during development should be listed under devDependency. In this example, once WebPack has finished bundling your files, we no longer care about WebPack because it's not apart of the final compiled file.
--save-dev : Anything that is used during development such as Unit testing frameworks or bundlers etc.
--save : Anything that is used within your application such as Axios, React, Vue or Chart.JS etc.
When installing anything via npm, it downloads dozens of not needed files. Usually I am looking for a library final build, a *.min.js file or anything like that but the rest is useless.
How do you handle all these useless files? Do you remove them by hand or generate the final app with any build tool like gulp or grunt?
I'm quite confused as I have plenty of npm modules installed in my webapp and the folder size is about 50 megabytes but it could be 2mb only.
npm install --production
Just doing an npm install brings in both development and runtime dependencies. You could also set the ENV to production globally for the server: npm config set production.
See this github issue. Note that this won't get you only the final minified build of everything, but will greatly reduce the bloat. For instance, a library might rely on babel-cli, babel-preset-es2015, and uglifyjs to be built (devDependency), but you don't need any of that if it also includes the transpiled minified file.
Managing Packages
For front end non-development packages I prefer Bower. It maintains the minified and non-minified version of your packages.
Build Tool
Use either Gulp or Grunt. Gulp would be my tool of choice.
Gulp task that will greatly improve your code are:
minification of both css and js
optimization/compression of images
concatenation and caching to reduce the number of calls to the server
package versioning
automatic injection of project dependencies
automatic injection of external dependencies
static analysis of js and css
automatic builds on code changes
deployment
testing
Node
If you can, leave to node all your development tools and leave to bower all your release plugins. Most node packages that are used in released apps have a bower installation counterpart.
Edit
Don't delete anything from Node manually as you don't know which packages have other packages as dependencies. If you are afraid that you may have junk in there, use npm rimraf to delete the node_modules folder, and then run npm install. Most importantly check your package.json for unnecessary saved packages.
Is it possible to exclude files from a list of NPM packages in my package.json?
I have a non-browser environment that works a bit differently: every file in node_modules dir becomes part of the production package. So there's no smart treeshaking that imports only the files that I use in my code.
For instance, I use some packages which also carry a lot of tests and i18n files, most of which I don't need and like to remove from my packaged production version. However, they are still included in the end package because the whole package folder is included in the build.
I'm trying to remove as many files from the packages as I can (without doing it manually each time) to save space and compilation time. The environment I use is looping all files in the node_modules directory and adds them to the production package (all packaged using Javascript). I would like a JavaScript solution to remove these files on compilation so the end package is as small as it can be.
I would use bower to manage client-side javascript modules, instead of using npm directly.
Bower packages are simpler than npm equivalents and don't have subfolders with module dependencies. Most will include a "dist" folder with pre-minified javascript. Right out of the box your packages will be smaller than if you use npm.
If you want to go further, you can include some processing in your gulpjs or gruntjs scripts to either manually copy needed files to lib and css folder(s), or use a plugin like gulp-bower-normalize to (somewhat) automatically do the same thing.
In a server side node project with the standard package.json, How should we mix coffescript and typescript files?
The npm install, npm test and npm start functionality should still be available. The commands themselves are not essencial.
Extra info:
the coffeescript and Typescript need to be able to talk to each other as much as possible
the project is written in Expres
How should we mix coffescript and typescript files?
Just add node.d.ts and then you should be able to just var/require coffescript files from typescript just fine. To require typescript files compile them to JS (using an IDE like atom, or grunt / gulp packages) and then you should be able to require them just fine.
To use TypeScript from typescript use import/require (instead of var/require) and then compile with --module commonjs.