I have developed a node project. It imports dependancies from package.json using require('dependancyX'). The node module works great. I'd like to have a build process that can turn the node module into a bower app. I can do this using browserify, but when I use browserify the web version of my project has all the node dependancies bundled with it. I'd prefer to have the web version only have my code, and have the other dependancies specified via the bower dependancies. I looked into browserify-shim, but I cannot figure out how to get my app built for the web recognize the bower version of the dependancies. Is what I'm trying to do going to work, and if does anyone know if a good project to model mine after?
Are you sure you do not want to package the dependencies? It's far easier that way. In any case you can use the --external flag to tell browserify to not include certain modules when bundling e.g
browserify -e index.js -o build.js --external async
browserify -o deps.js --require async
This will build your package, but not include async. Then build a separate file with async that you can include. For bower dependencies you can do
browserify -o deps.js --require async:./bower_components/async/async.js
Related
In a web project using yarn as package manager and parcel as bundler, I want to let Parcel transpile Transcrypt (Python) files to Javascript.
For this I installed parcel-plugin-transcrypt. But now when I bundle the project via parcel serve I get the following error:
Cannot find module 'parcel-bundler/src/Logger
Googling shows that this seems to be some version issue other plugins have encountered too. However I could not find a solution for parcel-plugin-transcrypt.
Any way to fix this?
The plugin for Transcrypt references files that have been refactored in newer versions of the bundler. To get it to work you need to add three missing files required by the build process. It's a work around for an underlying issue, but it fixes the problem for now. I use 3 wget commands to pull the files out of github and put them into the appropriate node_modules folder. So after installing parcel-bundler with npm, from the root folder of the project I run these:
wget -P ./node_modules/parcel-bundler/src/ https://raw.githubusercontent.com/parcel-bundler/parcel/b1e6d59cc44489f20013fa3171e09788978d7aed/packages/core/parcel-bundler/src/Logger.js
wget -P ./node_modules/parcel-bundler/src/utils/ https://raw.githubusercontent.com/parcel-bundler/parcel/b1e6d59cc44489f20013fa3171e09788978d7aed/packages/core/parcel-bundler/src/utils/prettyError.js
wget -P ./node_modules/parcel-bundler/src/utils/ https://raw.githubusercontent.com/parcel-bundler/parcel/b1e6d59cc44489f20013fa3171e09788978d7aed/packages/core/parcel-bundler/src/utils/emoji.js
I'm working on a library using browserify. I have an entry point e.js which requires the files a.js b.js c.js.
As long as i'm just bundling the complete library,
browserify -e e.js -o dist/lib.js works just fine.
However, I'd like the library to be extensible by others. They should be able to load lib.js in their code and then require('./c.js')from the library.
Using factor-bundle it will always create a new dist/lib.jswhich is incompatible with the originally built one.
I guess using browserify -r with all internal dependencies to build dist/lib.jsand then doing a browserify -x ... -e module.js -o dist/module.js, externalizing all library dependencies will work, but isn't there an automated way of achieving this?
Is it possible to create a bundle with all dependencies being exported and then creating a second bundle for the add-on module which automatically externalizes everything from the first bundle?
Thanks for your answers!
I want to build a small js plugin, and I want to try that with ReactJS.
ReactJS recommends installing using npm and browserify.
In my experience with Ruby on Rails, there are always a lot of things to install, and using Windows introduces additional problems.
With Ruby it is Rails Installer. What is JS equivalent of Rails Installer? i.e. a tool that lets me install all necessary packages with one step?
I did a little bit of search, find that I need to install:
NodeJS, NPM
NVM
Webpack or Browerify
Babel
I think there may be others that I need.
To start the project you need node and npm because webpack, browserify and babel is npm packages.
The only way to install all packages in one step is to install package that actually depend on all packages you need. There is a lot of ReactJS starter kits in github like this https://github.com/kriasoft/react-starter-kit
I, personally recommend you doing such a things by yourself - its not a big deal if you understand what you want. In the root of all nodejs projects there is a file package.json every time you need a new module (package) just type npm install -S <module_name> in the root directory of your project.
This new module appears in node_modules directory and because of -S flag it name also will be stored in dependencies of your project in package.json file so that in the future you can just type npm install to install all dependencies (aka modules/packages) of your project.
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.
I added highlight.js to bower.json and installed it.
But there are only sources of highlight.js, how can I compile it using bower?
Bower is just download the dependencies. Installation is depends on what development environment are you at? Single page application with Yeoman? Node.JS web application with Express? Or something else.
There are some JS task runners like grunt or gulp. I prefer grunt. If you are using grunt, there is exist grunt's task runner for it called grunt-bower-task that will install your downloaded bower components into specific folder that meets our need.
I recommend you to use/ learn Yeoman that is included yo the scaffolding, bower the dependencies manager, and grunt the task runner if you are starting single page application development.
So basically bower is just front end dependency manager unlike NPM which is NodeJS dependency/ package manager that we usually use at backend/ web server.
since you are using bower to install highlight.js, i believe it's used at client side.
you don't need to compile javascript at all, you just need to load it and use it globally.
there are several ways to load it into global execution context:
inline script in html <script src="path/to/bower/component/highlight.js"></script>
using front-end AMD modularization tool like requirejs
use front-end CMD modularization tool like browserify, webpack