I am investigating the features of Lerna to try and speed up our bootstrap process which currently takes quite a long time.
When referring to bootstrap here I am referring to the process of running npm install with hoisting and linking local packages together
One of the things I am trying to do is only build the packages that I have changed in a branch. Take this example project
Package CLI
Package Header
Package Footer
Package WebApp : Depends on Header & Footer
With this scenario what I want to do in CI is:
If I only change the CLI project then only the CLI project should go through bootstrap -> build -> test
Only changing Header should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing Footer should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing WebApp should do the process for Header, Footer and WebApp because we need to use the dependencies to check WebApp
The first thing I have looked at is using the jobs affected by a PR. This works for executing a script defined in the package.json, but only for the package itself and not its dependencies. In my example if I change CLI then the job only runs in the CLI package as I want, but if I change WebApp then it only runs in WebApp and it doesn't run on the dependencies Header and Footer. This is only for running an npm script rather than bootstrap anyway so I am not even sure this is the correct thing to be looking into.
Secondly I was looking into using task pipelines. So for example in the package.json of the WebApp I have
"dependencies": {
"header": "*",
"footer": "*"
}
And then in the Lerna.json I have
{
"version": "3.0.0",
...
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
]
},
"test": {
"dependsOn": [
"^build"
]
}
},
"useNx": true
}
As far as I can tell though when I run test on WebApp using $ npx lerna run test --scope=webapp I can't see any output relating to it doing anything with it's dependencies. Additionally, I still think this doesn't account for the bootstrap process needed before the build step.
Related
I've got a private npm package hosted on GitHub. The package is essentially a Vue component and I build it with vue-cli-service build --target lib --name init-map src/main.ts. Here's the main.ts's contents:
import InitMap from "./components/InitMap.vue";
export { InitMap };
I use the package inside my other project, and I develop them both simultaneously. Therefore, I want to link the package: yarn link (inside the package directory), then yarn link #smellyshovel/init-map inside the consuming-project directory.
The problem is that when I run "yarn serve" (i.e. vue-cli-service serve) inside the main project, it freezes on 69%...
... and seems to stay like that forever.
Axios doesn't seem to be a problem to me (even though the message), since 1) everything is working fine without the linked package, 2) it shows a different message sometimes (something bootstrap-vue-related on 58%) though I only saw this other message like once (and not sure what exactly caused the difference).
What am I doing wrong? Why does the serve freezes when using a linked package as a dependency? How do I solve this?
Please, name me any other stuff you would like me to show since I'm not sure what exactly could be related to the issue and therefore haven't included any details that might be of interest.
OK, the problem indeed seems to be related to resolving symlinks, and the solution would be to simply prevent webpack from resolving these symlinks: https://github.com/vuejs/vue-cli/issues/1494#issuecomment-498144990
configureWebpack: {
resolve: {
symlinks: false,
},
}
I'm building a Wordpress theme and have recently switched from using Prepros to Webpack/Babel/PostCSS etc... to do all of the SASS and Javascript compiling manually so that I can add more custom functionality.
The last functionality of Prepros that I need to recreate is the automatic file uploading via FTP when a file is edited. I've been searching around for a while now and can't really find any Webpack plugins that will automatically upload files to a server via FTP whilst also giving me lots of options (i.e. specifying file extensions to upload/ignore).
What's the best way to automatically upload files to a server via FTP once they have been changed (saved) using Webpack?
At the moment it looks like my best option is webpack-ftp-upload-plugin, but it doesn't look like there are many customisation options as I mentioned above...
Use this script after completing build ftp-deploy. Right after the compilation, the bulldog will be deploy. You do not need to have a plugin in the webpack
"scripts": {
"build": "concurrently \"yarn prod"\ \"yarn deploy\"",
"prod": "webpack --config webpack.config.js --mode production",
"deploy": "node deploy"
}
For development purposes i don't use npm run serve because i'm integrating Vue with my backend project. Instead, i wrote my own command in package.json:
"dev": "vue-cli-service build --mode development --watch"
And it all works great, but it generates tons of webpack's hot-update.js files in my build dist directory and the problem is that they don't get deleted.
Is there a way to configure vue-cli/webpack in such way that these files are automatically deleted or not even created in the first place?
I believe the development mode will automatically enable hot reloading when the watch flag is enabled. Even though without the watch flag the development mode flag on build will not include hot reloading. Confusing. I had to add this to my vue.config.js file:
module.exports = {
chainWebpack(config) {
config.plugins.delete("hmr")
},
};
Note: that will ruin
npm run serve
Installing Datatables, Editor and their options (Select, RowGroup etc.. ) can be quite tricky with the official npm installation. You have to install multiple dependencies, be cautious of the CSS versions you import and so on.
I had an hard time dealing with it so I share you a quite straightforward solution.
Datatables offers an excellent download option in the download builder, which allows you to the styling, packages and extensions you want and download them in a single folder.
So first of all:
pick the configuration you want and then download the files (with concatenate option).
Then :
Copy the Datatable package into some local directory.
Add a package.json file with the following
{ "name": "datatables-bundle",
"version": "1.10.16",
"description": "Datatables bundled",
"main": "datatables.js",
"author": {
"name": "SpryMedia Ltd",
"url": "http://datatables.net"
}
}
go to your project directory
Call npm install ../datatables-local-package-path.
Once this is done, I can require the bundled package with a single line:
window.dt = require('datatables-bundle');
for CSS :
//Datatables styles
#import "~datatables-bundle/datatables.min.css";
... and this works!
Editor and Tables are fully functional so are the options (select, RowGroup...).
It spares the difficulty of installing separately all the npm packages, the post install process (for Editor's licence) and so on.
Of course the package won't update by itself but this is a minor issue.
I have set up a basic webpack/babel/mocha project just for playing around. Now I installed jQuery and Paper.js to my project with Bower, but I want them to be bundled with webpack on npm start, I don't want to write extra <script> tags etc.
I just want to use them as import $ jQuery from 'jquery'. But now my setup looks for the jquery package in npm_modules. How can I tell npm to look for these in the bower_components folder?
Is this a logical decision tho? Or am I supposed to set up this any other way?
Personally, I'd usually recommend installing everything through NPM - most frontend dependencies are on there these days. However, it does say on the Paper.js NPM page that they recommend using Bower to download the browser version of the library (perhaps there's some Node-specific code in the NPM package? I'm not sure).
To get Webpack working with Bower packages, you can set a custom name/path using config.resolve.alias:
var path = require("path");
var config = {
...
resolve: {
alias: {
"jquery": path.resolve(__dirname, "path/to/bower/file"),
"paper": path.resolve(__dirname, "path/to/bower/file")
}
}
...
}
This can come in handy in quite a few situations outside of Bower, too - for example, if you need to use a library that isn't currently distributed through a package manager, you can just add it to your project folder and use an alias to make it available to your code.