Lerna.js Setup in NodeJS - javascript

I am trying to set up my project based on MonoRepo for that I have used lerna.js now as far as I know lerna.js work as follows.
For Dev
Create lerna.json and update all packages and workspace details to package.json and lerna.json
run yarn or npm client as usual you do.
any folder inside packages/ will be treated as node_module so you can directly call them.
Now running my application as dev works fine but when to build or transpile my es6 code using Babel for production than lerna.json doesn't work right following are problems which are making me confused about how to use it.
Do I have to Publish all my packages to npm for using them in production?
running lerna Bootstrap links packages but when I view my package inside node_modules it still contains es6 code..due to this node application throws an error for using import statement which node didn't understand unless you use experimental flag.
Following is the Example:
lerna.json
{
"packages": [
"packages/*"
],
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true
}
packages Directory
packages/
context/
dyna_modules/
www/
npm scripts
"clean": "lerna clean --yes && rimraf node_modules && rm -rf package-lock.json yarn.lock",
"build::js": "babel ./packages --out-dir ./build/packages/ --ignore node_modules",
"build::nonjs": "babel package.json prisma.yml Dockerfile docker-compose.yml .env --out-dir ./build --copy-files && babel ./packages/routes --out-dir ./build/packages/routes --copy-files",
"build": "rm -rf ./build && mkdir ./build && npm run build::js && npm run build::nonjs",
"dev:nodemon": "DEBUG=*,-babel,-babel:*,-express:*,-nodemon:*,-nodemon,-snapdragon:*,-finalhandler,-follow-redirects nodemon -L --exec babel-node --inspect index.js",
"dev": "yarn dev:nodemon --ignore-engines",
"prestart": "npm run build && lerna bootstrap",
"start": "cd ./build && node ./packages/www/index.js",
Problem
Running yarn start always fails with error for using the Import statement. During the inspection, I found out that all my packages/modules inside node_module contain es6 syntax instead of a trans-piled code.

Related

Why it doesn't work on NPM but does work on Yarn?

I setting up my test framework with TypeScript, Babel and Cucumber. I want to make it without yarn but it doesn't work on NPM. On NPM tests run but don't see scenrios, on Yarn everything is fine.
Yarn setup (works):
"scripts": {
"transpile": "rimraf /dist && babel --extensions .ts --out-dir /dist /src",
"cucumber-compile": "npm run transpile && cucumber-js",
"cucumber": "yarn cucumber-compile"
},
Output after I run:
yarn run cucumber --profile api
OUTPUT here
NPM setup (doesn't work):
"scripts": {
"transpile": "rimraf /dist && babel --extensions .ts --out-dir /dist /src",
"cucumber-compile": "npm run transpile && cucumber-js",
"cucumber": "npm run cucumber-compile"
},
Output after I run:
npm run cucumber --profile api
OUTPUT here
My index.ts:
index.ts
My .babelrc
.babelrc

Error running a 'npx tsc' command regarding Typescript: This is not the tsc command you are looking for

First to mention that TSC is deprecated: https://www.npmjs.com/package/tsc
This is the error I am getting:
This is not the tsc command you are looking for
I am working on a monorepo so on 3 different package.json in the scripts key, I have something like this:
"scripts": {
"build": "rm -rf lib/ && npx tsc && cp -R src/assets/ lib/assets/",
}
I would like to know how from my monorepo I can fix this problem and if I need to replace the npx tsc command with npx typescript command or something related to that?
The problem is that npx doesn't know where to find the right tsc command. It first looks for a package named tsc.
The warning is produced by a package named tsc (https://www.npmjs.com/package/tsc). It used to do what we expected it to do. Now it is deprecated. It is not an official package by Microsoft. I hope the maintainer is not evil because the package has ~40.000 downloads/week.
The solution is to use the -p (or --package) switch to tell npx which package provides the tsc command. In this case it is the typescript package.
npx -p typescript tsc
So your script section should look like this
"scripts": {
"build": "rm -rf lib/ && npx -p typescript tsc && cp -R src/assets/ lib/assets/",
}
npx will download a package from the registry and run it without having to install it. This is handy for small cli tools without having to add them into your dependencies.
npx tsc will install https://www.npmjs.com/package/tsc and run it via npx which is not what you're trying to do I gather. I think you'd like to run typescript.
For that you should install typescript into your project and run it via npm run tsc or just tsc.
Change
"scripts": {
"build": "rm -rf lib/ && npx tsc && cp -R src/assets/ lib/assets/",
}
To
"scripts": {
"build": "rm -rf lib/ && tsc && cp -R src/assets/ lib/assets/",
}
i.e. remove npx.

How do I include asset files with parcel js?

I have a folder of dynamically loaded asset files I want to include in my parcel output directory. How can I include unreferenced static asset files like .json, .jpeg, .txt, .etc with my parcel build command?
With Parcel v2 there's a different plugin: https://github.com/elwin013/parcel-reporter-static-files-copy
yarn add parcel-reporter-static-files-copy --dev
then you need to create .parcelrc or add to the following to it. (Note: "..." is literal not something you need to fill in):
{
"extends": ["#parcel/config-default"],
"reporters": ["...", "parcel-reporter-static-files-copy"]
}
now any files (and sub-directories) in a directory named static will be automatically copied to the website (typically your dist folder) when you do the regular parcel build.
Note: This answer is for Parcel v1
There is a parcel plugin for that:
https://www.npmjs.com/package/parcel-plugin-static-files-copy
Install it:
yarn add parcel-plugin-static-files-copy --dev
Or
npm install -D parcel-plugin-static-files-copy
Then, in package.json, add:
"staticFiles": {
"staticPath": ["path/to/a/staticFolder"]
}
It should copy your files to the public folder.
Stay safe!
The best way to handle this is having control of the code. npm already provides the tools needed for this job. In the package.json, when running commands with &&, the first command will run, and if it does finish without any error, the second command will also be executed. Running &, however, will run each command in the background independently, regardless of what happens to the other command.
In other words:
Use && for sequential execution.
Use & for parallel execution.
For example:
project/
|dist/
|...
|src/
|assets/
|text.txt
|memos.txt
|info.ini
|css/
|style.css
|img/
|a.png
|b.jpg
|c.jpeg
|data.json
|not-to-copy.json
|not-to-copy.conf
|index.js
|index.html
|package.json
If you have a project structure like this add, some scripts to the package.json
{
...
"source": "src/index.html",
"scripts": {
"clean-dist": "rm -rf dist && mkdir dist",
"copy-img": "cp -vR ./src/img ./dist",
"copy-data": "cp -r src/data.json dist",
"copy-assets": "cp -r src/assets/* dist",
"copy-files": "npm run copy-img & npm run copy-assets & npm run copy-data",
"init": "npm run clean-dist && npm run copy-files",
"start": "npm run init && parcel",
"build": "npm run init && parcel build"
},
...
}
This configuration will sequentially run clean-dist and copy-files. The former will delete the dist directory and make the directory again. Then copy-files will copy src/img -> dist/img, src/assets/* -> dist/* and src/data.json -> dist/data.json in parallel. Finally, parcel will be executed.
You can edit your package.json scripts to copy the files after the build has executed. This is how I had a .htaccess file to the dist folder:
"build": "rm -rf dist && parcel build src/index.html -d dist --public-url ./ '.' cp src/.htaccess dist"

Babel and Lerna Setup issue on different environemnts

I am trying to structure my project based on lerna.js now as per documentation
everything is setup and is working fine when run as development server following is directory
structure.
index.js
packages/
package1
package2
index.js => contains: import Package1 from 'package1' <--- Package1 etc path is managed by lerna.
package3
DEV & BUILD Command
# Build
"build::js": "babel ./packages --out-dir ./build --ignore node_modules",
"build::nonjs": "babel ./package1 --out-dir ./build/package1 --copy-files",
"build": "rm -rf ./build && mkdir ./build && npm run build::js && npm run build::nonjs"
# Dev
"dev:nodemon": "DEBUG=*,-babel,-babel:*,-express:*,-nodemon:*,-nodemon,-snapdragon:*,-finalhandler,-follow-redirects nodemon -L --exec babel-node --inspect index.js",
"dev": "yarn dev:nodemon",
Now runing dev command on my project works fine but when files are build for production than babel doesnt change Package1 path to its absolute location just like regular module.
...
var _Cache = _interopRequireDefault(require("package1")); // <<---- how to get ride of this problem. as. node tires to locate module but there is no package1 in node_modules its just regular modules which is inside packages/ directory. now running it on dev simply works.

NPM Package Development - How can i execute the build command after package install?

how do i to generate the build folder after my package be installed?
i did this:
"scripts": {
"build": "babel ./src --out-dir ./build"
}
But when other user install the package the npm not build.
How can i execute the build command after install?
You should use "postinstall" in scripts.
source: https://docs.npmjs.com/misc/scripts
It's almost certainly best not to have a post-install step at all. What you really want to do is to build the project before it is published, and then publish the built version to NPM (assuming that's what you are trying to do). In that case, you might use a prepublish script:
// package.json
"scripts": {
"build": "babel src -d build",
"prepublish": "npm run build"
}
And make sure the built files are included in your files array:
// package.json
"files": ["build"]
Or that your source files are excluded in your .npmignore:
// .npmignore
/src/
If you really do need a post-install step for some reason, use a postinstall script:
// package.json
"scripts": {
"build": "babel src -d build",
"postinstall": "npm run build"
}
But I can't think of a use-case where this would be a good idea.

Categories

Resources