yarn build failure within vega embed - npm

I have cloned the VegaEmbed repo where I am supposed to perform yarn which succeeds with the following output:
yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#2.3.2: The platform "win32" is incompatible with this module.
info "fsevents#2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
$ beemo create-config
[1] CONFIG Creating config files (476ms)
Then, I am supposed to perform yarn build which fails with the following output:
yarn run v1.22.10
$ yarn clean && yarn build:style
$ del build build-es5 src/style.ts
Parameter format not correct - "style.ts".
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS C:\Users\hmiri\Downloads\VegaEmbed> yarn
yarn install v1.22.10
[1/4] Resolving packages...
success Already up-to-date.
$ beemo create-config
[1] CONFIG Creating config files (416ms)
Searching for the keywords of the error message does not bring up any useful instructions on how to resolve this error.
When I search for style.ts I get a hit in my package.json as follows:
"scripts": {
"prebuild": "yarn clean && yarn build:style",
"build": "rollup -c",
"build:style": "./build-style.sh",
"clean": "del build build-es5 src/style.ts",
"prepublishOnly": "yarn clean && yarn build",
"preversion": "yarn lint && yarn test",
"serve": "browser-sync start --directory -s -f build *.html",
"start": "yarn build && concurrently --kill-others -n Server,Rollup 'yarn serve' 'rollup -c -w'",
"pretest": "yarn build:style",
"test": "beemo jest --stdio stream",
"test:inspect": "node --inspect-brk ./node_modules/.bin/jest --runInBand",
"prepare": "beemo create-config",
"prettierbase": "beemo prettier '*.{css,scss,html}'",
"eslintbase": "beemo eslint .",
"format": "yarn eslintbase --fix && yarn prettierbase --write",
"lint": "yarn eslintbase && yarn prettierbase --check"
}
What's wrong in the clean section? Can someone please help me understand what needs to change there?

The problem was that del is a windows command. We need to switch to del-cli. I fixed it in https://github.com/vega/vega-embed/commit/eaa96696e8f7c1a1f6950968a0f5494e6b73ce91.

Related

What is the best way to build TS assets in a NPM package

I have a NPM package with TypeScript based React components. When the package is installed, I would like to run a script that essentially runs tsc to compile the TS files, then delete the src folder when done.
// Excerpt from package.json
"scripts": {
"build": "rm -rf ./dist && tsc",
"install": "tsc",
"postinstall": "rm -rf ./src tsconfig.json"
},
However, I noticed that the install hook always runs, whether you're running npm install git+ssh://git#github.com:sparkbuzz/react-components.git but also when you run npm install from within the package (during development for example)
Is there a way to ensure the install script is only executed when the NPM package is remotely installed?

run npm script after package installing

I have a simple git repository https://github.com/alexey-sh/test_webpack_with_npm
I want to use it as npm dependency but without publishing in npm.
So in other words I want to install the package in my another repository as dependency.
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
But I want to use a modern js in my test_webpack_with_npm project and compile it into old javascript after package installation process. To achieve it I created npm scripts (test_webpack_with_npm package)
"scripts": {
"install": "npm run build",
"build": "webpack --mode production --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
so now there's a weird thing:
if I run npm run build from test_webpack_with_npm repository I can get dist/index.js without class declaration (as I expected).
but if I install the package via the following command
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
I get another type of dist/index.js and there are class declaration.
How can I install the test_webpack_with_npm properly? I want to see old js in node_modules/test_webpack_with_npm/dist/index.js.
Steps to reproduce:
mkdir my_test_project
cd my_test_project
npm init
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
check node_modules/test_webpack_with_npm/dist/index.js
Thanks!
the fix is very simple. just replace exclude with include in webpack config
include: path.join(__dirname, 'sources'),
that works perfectly.
updated config goes here https://github.com/alexey-sh/test_webpack_with_npm/blob/master/webpack.config.js

How are devinstall and devuninstall scripts being used?

I am trying to reuse husky for other projects (not just config file), building a lib of sorts that will be used by all other projects.
I cannot understand how and when devinstall and devuninstall scripts are executed. Cannot find any documentation either on npmjs.com.
Can someone help understand when this are getting executed please?
I've been trying to understand that too.
Turns out they do something at publication time that renames the _install script into install.
Here's the script field of the package.json found in the husky folder when installed through npm.
"scripts": {
"build": "del-cli lib && tsc",
"devinstall": "npm run build && npm run _install -- node_modules/husky && node scripts/dev-fix-path",
"devuninstall": "npm run build && npm run preuninstall -- node_modules/husky",
"fix": "npm run lint -- --fix",
"install": "node husky install",
"lint": "tslint 'src/**/*.ts'",
"postpublish": "pinst --disable",
"postversion": "git push && git push --tags",
"prepublishOnly": "npm run test && npm run build && pinst --enable && pkg-ok",
"preuninstall": "node husky uninstall",
"test": "npm run lint && jest",
"version": "jest -u && git add -A src/installer/__tests__/__snapshots__"
}
Although I can't figure where that is done

A customized npm script to compile, watch and server

I'm trying to set up a project which makes use of express and react. And I'm trying to make the best use of React-Slingshot project to benefit from it as much as possible. But the thing is that my project needs to be served (on the server side) by a script which I wrote. That script will use express and possibly socket.io to server the client side.
I think this is a problem if I use projects like React-Slingshot since they come with their own server scripts which support hot reloading and stuff. I'm willing to give up the fancy functionality like hot reloading. But I need to keep the --watch functionality so each time some file is changed, the code is compiled without me restarting the whole server.
Right now, the script section of package.json looks like this:
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm run start-message",
"start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && babel server -d dist --presets es2015,stage-2",
"test": "jest",
"test:CI": "babel-node tools/testCi.js",
"test:cover": "npm run test -- --coverage ",
"test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "jest --watch",
"open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
This is a modified version of what you can find in React-Slingshot. I've made a change so when I run npm run build, it builds the server code as well and terminates. It used to be like this:
"build": "babel-node tools/build.js && npm run open:dist",
Now, I'm trying to find a way to run my own server (i.e. node temp/server.js) while the rest of the code is compiled based on --watch as for my dev environment.
I believe you need a package like watch also check this video

how to dynamically select package manager in package.json

I am currently using yarn as my package manager, but some people on my team may still use npm. I wrote a few scripts in package.json
"scripts": {
"clear": "rm -Rf app/javascripts/* & rm index.html",
"watch": "yarn clear | NODE_ENV=development webpack -w --env.dev",
"build": "yarn clear && yarn dev && yarn start",
"dev": "yarn clear | NODE_ENV=development webpack --env.dev",
"prod": "yarn clear | NODE_ENV=production webpack --progress --env.prod"
}
If I want to call clear inside of other scripts, I have to either use npm clear or yarn clear. As the script is currently written, someone who doesn't have yarn installed will run into an error.
Is there a way for me to write this package.json so that it will work regardless if someone runs npm build or yarn build, and it will use the package manager of their choosing?
You can use the variable npm_execpath, it will point to the package manager used to run the script.
For example, this will output the version of yarn or npm:
"scripts": {
"version": "$npm_execpath -v",
}
$ npm run version
> 3.10.10
$ yarn run version
> 0.21.3