I have a problem with an npm module I've created. It's built using browserify and babelify.
Here is a snippet from the package.json:
"name": "foo",
"main": "index.js",
"scripts": {
"start": "watchify src/foo.js -t babelify -s foo -o ./index.js"
}
Which is basically the entire build process (no minifying or anything). There are also some tests, which run without a problem.
In src/foo.js I import other files, which are located in the same folder.
import bar from './bar';
So, the file structure looks something like:
index.js
package.json
src/
foo.js
bar.js
Now, when I install the module elsewhere, in a completely different project, and import it:
import foo from 'foo';
... and build the new project with
watchify src/app.js -d -t babelify -o js/app.js
I get this error:
Error: Cannot find module './bar' from '[file_path]/node_modules/foo/'
So basically (as I understand it), it looks at the (now) var bar = require('./bar'); and searches in the file path (the same folder) whereas, everything in reality was bundled into one file, everything included.
What am I missing here? How do I build it correctly?
Related
I'm building a website using vuejs and trying to load agile-vue to use globally in the vue app. So I added following code into main.js:
var VueAgile = require('vue-agile');
Vue.use(VueAgile);
Later on I use browserify with babelify and envify to create a bundle.js file. and use the following code to compile:
NODE_ENV=production browserify -g envify -e main.js > bundle.js
with the babelify preset 'babel-preset-env' setup in the package.json file. I got the following error:
import VueAgile from './Agile.vue'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
I got rid of the error with adding esmify:
NODE_ENV=production browserify -g envify -p esmify -e main.js > bundle.js
but I got stuck with a new error:
<template>
^
ParseError: Unexpected token
I've been searching a while for a solution and I think there is something wrong with browserify not transforming all files (only topfiles, not dependencies) but I have not found how to force it.
All help is appreciated.
My project structure very very roughly looks like this:
dist/
- helper.compiled.js
- entrypoint.compiled.js
src/
- helper.js
- entrypoint.js
I was reading the npm publishing guidelines and it says to provide a single index.js file. But is this really necessary? Afterall, my entrypoint.compiled.js can just require helper.compiled.js. What is the benefit of providing a single index.js file?
What is the recommended procedure for publishing a library to npm in this situation? I tried using npm pack, but I don't quite understand what it is doing.
The best way to bundle just the compiled files is to put the directory in the files section of your package.json. This will then only package the files that npm uses such as package.json, README.md, and other files that your package requires.
An example package.json looks something like this:
{
"name": "my-library",
"version": "1.0.0",
"description": "My Library.",
"main": "dist/entrypoint.compiled.js",
"scripts": {},
"author": "",
"license": "ISC",
"dependencies": {},
"files": [
"dist"
]
}
You need only to publish the compiled files. If you compile them correctly then there is no need to include your src/ folder in the package.
Here is my .npmignore file for my tree in react package: .npmignore You can see what is in the package here.
As you can see, I publish only the dist directory and every file in the root. The bare minimum is the package.json and the dist directory.
npm publish command essentially just creates a package from your files and uploads it to the npm registry. After running the command you will be able to find the npm package and use it as any other package.
After you run npm publish I recommend downloading published the package from the registry and try out if all the required files are there and verify that you can use everything.
I am new in nodejs framework .I read the tutorial, but I want to know how to create a build in node js, in other words I need a script which create my build folder.
I follow these steps
create index.js in root directory add some code.
then add this line of code
import express from 'express';
const app = express();
app.listen(3000,function () {
console.log(`app is listening on 3000`)
})
in my package.json I added start and build script
"scripts": {
"start": "nodemon ./index.js --exec babel-node -e js",
"build": "mkdir dist && babel src -s -d dist"
},
when I do npm run start .my application run fine and I am able to debug also.
Now I want to deploy this application on production Need build.so how to generate build using babel
when I run npm run build I am getting error
src doesn't exist
You 'build' command is like 'mkdir ... && babel src ....', then in the photo it does not have a src folder. So you can simply create a src folder and move index.js to src/, or change the command to 'mkdir dist && babel ./ -s -d dist'. I did not test, but it should work.
I created a new project
I npm install -g browserify
I tested using the cmdline, browserify app.js > bundle.js. Cool.
I want to minify so I npm install uglifyify --save-dev
I tested using the cmdline, browserify -g uglifyify app.js > bundle.js. Great.
Now I want to do this with code, but I get Error: Cannot find module 'browserify'
This is my code, basically to replace the cmdline
var browserify = require('browserify')
var fs = require('fs')
var bundler = browserify('./app.js')
bundler.transform({
global: true
}, 'uglifyify')
bundler.bundle()
.pipe(fs.createWriteStream('./bundle.js'))
It seems I would need to again install browserify locally to this project?
Installing an npm module like browserify allows you to use browserify as a command on the command line. To use the module within your project's code, you must install the module as a dependency. In other words, yes, is must be installed locally within the project's ./node_modules folder and referenced in the package.json file.
From the npm documentation:
Local install (default): puts stuff in ./node_modules of the current package root.
Global install (with -g): puts stuff in /usr/local or wherever node is installed.
Install it locally if you're going to require() it.
Install it globally if you're going to run it on the command line.
If you need both, then install it in both places, or use npm link.
As said in the other answer, one way to solve this is that you can install browserify locally instead of globally, like: npm install --save browserify uglifyfy. Then you can add a script in package.json:
...
"scripts": {
"build": "browserify app.js > bundle.js",
...
},
...
Now, npm run-script build will know how to find local browserify, which is going to be in your node_modules/ directory. And your require('browserify') will work, since browserify is now local.
Another way you could solve this is NODE_PATH env variable. Set this variable in your bashrc or equivalent like this:
export NODE_PATH=$NODE_PATH:$HOME/.nvm/versions/node/v4.2.6/lib/node_modules
Adjust the path to wherever your global node_modules are. Then you can require() whatever you installed with -g flag in your code.
However this is suboptimal, as it can lead to errors and misunderstandings. But if it's for some quick-and-dirty scripts, it can help.
I'm working with Babelify and Browserify. Also, I'm using ES6 style module features by node module system.
I would like to put all my own modules into node_modules/libs.
For instance:
test.js in node_modules/libs
export default () => {
console.log('Hello');
};
main.js (will be compiled to bundle.js)
import test from 'libs/test';
test();
After that, I have compiled the above codes to bundle.js with this command:
browserify -t babelify main.js -o bundle.js
But unfortunately, I have got some error:
export default () => {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Directory structure:
[test]
`-- node_modules
│ `-- libs
│ `-- test.js
`-- main.js
But, when own modules not in node_modules like this:
[test]
`-- libs
│ `-- test.js
`-- main.js
Then, it works fine. How can I use the ES6 style modules with babelify in node_modules?
That is how Browserify transforms work, transforms only have an effect directly in the module that is being referenced.
If you want a module in node_modules to have a transform, you'd need to add a package.json to that module and add babelify as a transform for that module too. e.g.
"browserify": {
"transform": [
"babelify"
]
},
inside your package.json plus babelify as a dependency will tell browserify to run the babelify transform on any file inside that module.
Having libs be a folder in node_modules is however probably a bad idea. Generally that folder would have true standalone modules in it. I'd generally say that if the folder can't be taken and reused elsewhere, then it shouldn't be in node_modules.
Update
For Babel v6, which was recently released, you will also need to specify which transformations you would like to perform on your code. For that, I would recommend creating a .babelrc file in your root directory to configure Babel.
{
"presets": ["es2015"]
}
and
npm install --save-dev babel-preset-es2015
You can specify source transforms in the package.json in the
browserify.transform field. There is more information about how
source transforms work in package.json on the module-deps
readme.
Source: https://github.com/substack/node-browserify#browserifytransform
Example (my_batman_project/node_modules/test_robin_module/package.json):
"browserify": {
"transform": [
"babelify"
]
},
browserify will read the configuration and perform any given transforms automatically.
I believe this issue is actually related to ESLint.
ESLint 2.0 changed what's required for it to interpret ES6 modules. http://eslint.org/docs/user-guide/migrating-to-2.0.0
You'll need to modify your ecmaFeatures configuration option and replace it with something like:
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},