I would develop a node package for my webpack project with some JS.
The project stack is Yarn + Webpack Encore + Stimulus + PHP + Symfony.
The package is in a Symfony bundle and Flex is linking it through composer, this part is working fine.
To develop the package, I am having a package and a project using it.
The package is added by its local path on my file system using "file:", then I run yarn watch, this is working properly.
But by developing locally, I would changes to be detected by webpack to compile the new changes.
Using "file:", yarn/node seems to create a copy of my sources, so it won't listen the sources for changes.
For this reason, I am running yarn upgrade #my/package --latest, changes are copied to the node_modules then webpack is compiling again, ok, good, but nothing has changed in reality, the new changes are ignored.
I have to kill the yarn watch, run yarn upgrade then run yarn watch and it works as expected, it's taking so much time ! (1minute ~)
I also tried using link: but webpack is failing to compile.
How to develop a webpack package locally ?
Related
I have an Express app that I build and run using npm run serve which I define in my package.json scripts serve section as: 'npm run build && node lib/index.js'. Recently, I installed React Native for another project, however, when I return to my express project and attempt to build it with npm run build, I recieve multiple duplicate declaration errors in the terminal:
React Native is not defined anywhere in my Express project, when I examine my node modules, there is no react-native package even installed. Before installing React Native in another project this command worked fine, the Express project has not been changed since it last compiled succefully.
Thanks #TheGreatZab for testing it out.
Post the answer here to help anyone who are suffering from this problem.
The reason is an extra node_modules/package.json exist in grand parent directories which trigger the butterfly effects.
Solution:
Remove the node_modules, package.json from parent/grand parent directories
Hi Is there a way to build/run ng cli command (ng build --prod) without downloading the npm packages every time?
The production build is very slow because of this reason, I wanted to check if this download can be avoided if we not adding any new node modules and using the existing one from the node module folder.
ng build --prod is not downloading any npm packages, but instead it's bundling those packages (as vendor-chunk) along with your app code.
The reason is slow in --prod is that because prod uses aot and build optimizer by default. All that time taken is for good cause, to bundle your code, tree shake it, uglify it...etc.
The only thing you can do in this case, is to make sure your code is not using any unnecessary 3rd party libraries, and most importantly you're using the latest ng-cli and Angular versions. keep up with the latest Angular updates, as the Angular Team is working very hard to make it awesome in every version they release.
I am new to web development using node and jspm.
Please explain the difference between node and jspm and how they can be combined used in a project.
Do we need to copy all our node dependency or node module folder to the production server?
JSPM is the command line tool, that works in Node. Usin JSPM you can:
Configure your SystemJS config file to load all dependecies one-by-one in development
Build all dependecies into single minified js bundle for production.
So, you do not need to copy node_modules into production, just run jspm bundle command and copy it's output to production only.
I'm trying to create my first React Native app for Android using the instructions on https://facebook.github.io/react-native/docs/getting-started.html. After setting up the dependencies and connecting my Android device, I ran
react-native init app
cd app
react-native run-android
This starts the React Packager, which fails to bundle with this error:
error: bundling failed: "TransformError: /Users/luky/dev/app/index.android.js: Unexpected token ) (While processing preset: \"/Users/luky/dev/app/node_modules/babel-preset-react-native/index.js\")"
I am using:
OSX El Capitan 10.11.6.
node version 6.9.2
react-native version 0.47.1.
I pushed my generated project, including node_modules, to Github in case it helps: https://github.com/luky1971/react-native-app
Does anyone know why I might be getting an Unexpected token error? Any help would be greatly appreciated!
I got the same thing, it looks like the latest version of the babel preset for react native has some bugs (version 3.0.0). I went into my package.json and replaced the latest version with this:
"babel-preset-react-native": "2.1.0".
then I deleted the node_modules directory and ran npm install and it worked.
Install babel-preset-react-native#2.1.0 and run the project.
In the current project, do this...
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#2.1.0
This worked for me, I hope it will for you too.
You can find more information about the error here https://github.com/facebook/react-native/issues/15513#issuecomment-322824346
Try deleting the .babelrc file in the root directory. Or rename it. Then re-run the "react-native run-android" command. This worked for me. Good luck.
Looking for JS files in
/Users/admin/Desktop/CoinMarketCap
React packager ready.
Loading dependency graph, done.
Bundling `index.ios.js` [development, non-minified, hmr disabled] 0.0% (0/1), failed.
error: bundling failed: "TransformError: /Users/admin/Desktop/CoinMarketCap/index.ios.js: Unexpected token ) (While processing preset: \"/Users/admin/Desktop/CoinMarketCap/node_modules/babel-preset-react-native/index.js\")"
iMac-D001:CoinMarketCap admin$ react-native --v
react-native-cli: 2.0.1
react-native: 0.47.1
Fixed it for me:
https://github.com/facebook/react-native/issues/15545
iMac-D001:CoinMarketCap admin$ npm uninstall babel-preset-react-native
iMac-D001:CoinMarketCap admin$ npm install babel-preset-react-native#2.1.0
I cloned your project. It is working fine. You can delete node_modules folder, then npm_install. It will work fine.
Try to set a new project, choosing the version of react-native as below:
react-native init --version="0.55.0" MyNewApp
Go to the new project directory.
CD project_name
Open the app in android studio. Open the AVD manager emulator and choose the virtual device. Then execute this command back there on the prompt:
react-native run-android
This worked for me. Hope it can help you too.
It could also be because of a dependency that you're using and needs to be put in the preset of your babel.config.js
e.g. I ws using expo, then ejected. And one of the dependency was react-native-paper for which I had to change the babel.config.js file to get it working.
I am new to Node and I don't fully understand yet what installing locally means exactly. I know I need to install gulp both globally as well as locally but in my case I have a number of projects in separate folders under a development folder and I wonder if I really need to install the livereload extension locally in each separate project folder (which is what the documentation seems to suggest) would it not be easier to install it globally; or locally in the main development folder. Can someone explain how this works and what options I'd have.
Similarly I wonder whether if I install gulp locally in the development folder will this be available to each of it's children or whether I'd again need/want to install it in each project folder locally.
Here is an, albiet old, article on the node js blog that goes over locally vs globally. http://blog.nodejs.org/2011/03/23/npm-1-0-global-vs-local-installation
The basics are that if you want to require require('gulp-livereload') inside of your code it should be a local (dev) dependency. If you wish to interact with the module via the cli then install globally. For example you might have both gulp and nodemon installed globally.
The point of local install is that someone can bring down your project, type 'npm install' and get all of the dependencies local to that app.
So to answer your question install gulp-livereload locally. But other modules such as gulp, nodemon, etc you would have both global and local.
As an extra help if you want to install gulp as a project dependency but have it globally as well you can run 'npm link gulp' in order to keep them in sync.
Also, you can have just one global version while, using the local one, you can use for a specific project the specific version used while developing it.