The goal here is to watch a directory and output the new files.
When saved it should ....
- take every file in the directory and minify it
- transpile every file that needs transpiling
- add the minified file and the map in the same directory
What's actually happening ....
- message displays that files were compiled
- the .min "new" version of the file is not updated or changed and stays the same
Here's the package.json file
{
"name": "theme",
"version": "1.0.448",
"description": "Someones Theme",
"main": "index.php",
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.7",
"@babel/polyfill": "^7.12.1",
},
"devDependencies": {
"@babel/cli": "^7.12.8",
"@babel/core": "^7.12.9",
"@babel/preset-env": "^7.12.7",
"@babel/runtime": "^7.12.5",
"babel-preset-minify": "^0.5.1"
},
"scripts": {
"watch:babel-blocks": "npx babel blocks/jsxblock/*.jsx --watch --out-dir blocks/jsxblock/ --out-file-extension .min.js --source-maps"
},
"author": "Someone",
"license": "GPL-3.0-or-later"
}
Here's the .babel.config.json file
{
"plugins": [
"@babel/plugin-transform-react-jsx"
],
"presets": [
"@babel/env",
"minify"
]
}
UPDATE - 12/2/2020
Here's a link to a repl.it demo
https://repl.it/join/xldfgzre-juandahveed
If you've never used repl.it before, make sure you hit control + shift + s so that the terminal will come up.
Then you can run npm run watch:babel-blocks and see what happens.
In this instance, if you update the blocks/jsxblock/editor.jsx
file, the watch flag will actually work, and the blocks/jsxblock/editor.min.js
file will update with any changes you make.
The only thing I can think of, is that in my local instance ( which is really just a hyped up WordPress site with a build script ) I am using both the devDependencies
and dependencies
areas of my package.json
file, whereas with repl.it I can only have things be in the dependencies
. I did test this in my local environment and it did not fix anything.
Thoughts? Suggestions? Does anyone actually know the reason why?