I have an app in progress which requires 3 micro code bases and some iframe postMessage stuff.
Controlling the build of all these i aim to manage from a single rollup config file and injecting arguments in via cli:
"scripts": {
"dev:child": "rollup -c rollup.config.js -w --for_type child",
"dev:parent": "rollup -c rollup.config.js -w --for_type parent",
"dev:sidebar": "rollup -c rollup.config.js -w --for_type sidebar",
My rollup config works but the issue is that rollup complains that for_type is a non recognised argument.
What is the proper way of injecting custom arguments to rollup?
I cannot see anything here: https://rollupjs.org/guide/en/#configuration-files
When you export a function instead of an object in rollup.config.js, the first argument of the function will be a CLI arguments object. For example, if you config is:
export default cliArgs => {
let build = {
input: 'src/index.js',
output: [/* ... */],/
plugins: [/* ... */]
};
switch (cliArgs.for_type) {
case 'child':
// Customise build for child
break;
case 'parent':
// Customise build for parent
break;
case 'sidebar':
// Customise build for sidebar
break;
default:
// No CLI argument
break;
}
return build
};
Have another look at the documentation for more info.
From https://rollupjs.org/guide/en/#configuration-files
You can even define your own command line options if you prefix them with config:
export default commandLineArgs => {
if (commandLineArgs.configDebug === true) {
return debugConfig;
}
return defaultConfig;
};
Related
I'm trying to use dotenv.config() in a SvelteKit project.
I can run npm run build successfully. But when I try to start the server (using node build), it throws Error: Dynamic require of "fs" is not supported.
I tried to comment out the dotenv part in src/routes/test.js and build again, and this time the server started without any errors. (I created the project with npm init svelte#next without typescript, and except for the codes here, nothing else is changed)
How should I use dotenv here to load environment variables at runtime?
svelte.config.js
import node from '#sveltejs/adapter-node';
const config = {
kit: {
adapter: node(),
target: '#svelte'
}
};
export default config;
/src/routes/test.js
import dotenv from 'dotenv';
dotenv.config();
export function get() {
return {
body: {
test: process.env.TEST
}
}
}
.env
TEST=123
No need to explicitly load dotenv.
Vite uses dotenv
https://vitejs.dev/guide/env-and-mode.html#env-files
You can access your variable via import.meta.env.VITE_MY_VAR
Important is that your env variables must be prefixed with VITE_ in order to get them exposed. And if you are already running npm run dev, quit it and start again.
That worked for me.
Since a few weeks SvelteKit has a built-in way to handle environment variables:
https://kit.svelte.dev/docs/modules#$env-dynamic-private
I solved the problem with env-cmd (https://www.npmjs.com/package/env-cmd) by adding env-cmd to the beginning of svelte-kit dev, svelte-kit preview and node build.
Also, use process.env['TEST'] instead of process.env.TEST since process.env.TEST is replaced with ({}) by vite. (https://github.com/vitejs/vite/issues/3176)
This is what I did:
vite has a special config option for server port.
// import adapter from '#sveltejs/adapter-static';
import adapter from '#sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
import path from 'path';
import dotenv from 'dotenv-flow';
dotenv.config();
/** #type {import('#sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
// target: '#svelte',
/*
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: 'index.html'
}),
*/
adapter: adapter({
out: './build',
precompress: true
}),
vite: {
resolve: {
alias: {
$components: path.resolve('./src/components'),
$stores: path.resolve('./src/stores'),
$api: path.resolve('./src/api')
}
},
build: {
minify: true
},
server: {
port: process.env.PORT || 3000
}
}
}
};
export default config;
I have .env for defaults (dev etc) and .env.local that is ignored in .gitignore for production (keys, etc).
When .env.local is present it uses that port.
edit: this does not work with node-adapter in production. I think we need to declare PORT some other way. it only works with npm run dev
I am trying the Quasar Framework (for those not familiar, it's based on Vue) and it's going well. However I've tried running a build (npm run build) and get repeated:
error Unexpected console statement no-console
... so the build fails because it sees console.log(...) and is not happy. My options:
don't use console.log in development. But it's handy.
comment out the eslint rule that presumably enforces that, so letting console.log into production. But that's not ideal for performance/security.
have the build automatically remove any console.log. That's what I'm after.
But how?
I took a look at the build https://quasar.dev/quasar-cli/cli-documentation/build-commands and it mentions using webpack internally and UglifyJS too. Given that, I found this answer for removing console.log in a general Vue/webpack project: https://github.com/vuejs-templates/webpack-simple/issues/21
... but if that's how, where does that go within Quasar since there is no webpack config file? I imagine in the quasar.conf.js file (since I see an 'extendWebpack' line in there - sounds promising). Or is there a better way to do it? How do other people remove console.log in production when using Quasar? Or handle logging without it?
Thanks!
https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
quasar.conf.js:
module.exports = function (ctx) {
return {
...
build: {
...
uglifyOptions: {
compress: { drop_console: true }
}
},
}
}
The above will result in configuring terser plugin with the following:
terserOptions: {
compress: {
...
drop_console: true
},
(https://github.com/terser/terser#compress-options)
(you can see the generated config with quasar inspect -c build -p optimization.minimizer)
You still also need to remove the eslint rule to avoid build errors, see https://github.com/quasarframework/quasar/issues/5529
Note:
If you want instead to configure webpack directly use:
quasar.conf.js:
module.exports = function (ctx) {
return {
...
build: {
...
chainWebpack (chain) {
chain.optimization.minimizer('js').tap(args => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
},
}
}
It will do the same as above.
See https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
and https://github.com/neutrinojs/webpack-chain#config-optimization-minimizers-modify-arguments
https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/create-chain.js#L315
1 Edit package.json in Vue's project what had created it before.
2 Then find "rules": {}.
3 Change to this "rules":{"no-console":0}.
4 if you Vue server in on, off it and run it again. Then the issue will be done.
As an alternative I can suggest using something like loglevel instead of console.log. It's quite handy and allows you to control the output.
I wanted to pass the test environment value from command line with npm command which should be accessible into wdio.conf file. Something like npm test --env='stage'.
How to achieve it.
I do not think there is direct way in WDIO to achieve it. The one option that we used is:
Defined the below in the wdio.conf.js file:
const testEnv = process.env.TEST_ENV || 'FIT'; //code to read the value from cmd
exports.config = {
....
beforeSession: function(){
global.testEnv = testEnv; //making the testEnv global
}
....
}
Command to start the test: TEST_ENV='stag' npm test
So in your project the variable testEnv would be available throughout.
You can do it like this:
if (process.argv !== undefined && process.argv.length) {
process.argv.forEach(arg => {
if (arg.indexOf('--env=') !== -1) {
process.env.env = arg.replace('--env=', '');
}
});
}
console.log("Environment : " + process.env.env)
},
I'm looking to switch to webpack on an asp.net mvc website and there's 3 different environments of this website and each environment has their own color scheme (so people know what environment they're on) so I need a way to tell webpack which css file to load and when, but not sure how to go about that.
the end result is:
/asset/styles/style.dev.css
/asset/styles/style.debug.css
/asset/styles/style.prod.css
Update
For example you have a certain theme enabled by default and you have a theme switcher control (layout page) which raises events client-side using JavaScript.
In your entry script you can attach to the changed event of the theme switcher control and do:
Dummy code: Index.js
function changedEventHandler(){
var selectedTheme = $(this).selectedValue;
switch (selectedTheme) {
case "themeA":
require("themeA")
break;
case "themeB":
require("themeB")
break;
default:
require("defaultTheme")
}
}
webpack.config.js
resolve: {
alias: {
"theme$": path.resolve(theme),
"themeA$": path.resolve("./src/css/themeA.css"),
"themeB$": path.resolve("./src/css/themeB.css"),
...
If you want three different builds each with a different theme, you can do the following:
If you want a build with themeA run: npm run themeA
If you want a build with themeB run: npm run themeB
package.json
"scripts": {
"themeA": "webpack --env.theme=themeA --mode development",
"themeB": "webpack --env.theme=themeB --mode development",
webpack.config.js
module.exports = (env) => {
var theme = "";
if (env.theme) {
theme = "./src/css/" + env.theme + ".css"
}
console.log(path.resolve(theme));
return {
entry: './src/index.js',
output: {
path: distfolder,
filename: 'bundle.js'
},
resolve: {
alias: {
"theme$": path.resolve(theme)
}
},
...
..
.
In your entry point you can do:
index.js
import "theme"
I want to add the -p flag in order to generate documentation for private methods using grunt-jsdoc. How can I do that?
According to the documentation at grunt-jsdoc they state that we can use any of the options specified in the useJsDocCli, however do not know how they should be specified in the grunt task. Here is my current grunt task:
jsdoc : {
dist : {
src: ['app/scripts/directives/*.js','README.md'],
options: {
destination: 'doc'
}
}
}
How can I specify that I want the task to run with the -p flag (or any other flags)?
There's an example in the documentation under the template section https://github.com/krampstudio/grunt-jsdoc#templates
Just use the flag name without the dash, for example:
dist : {
src: ['app/scripts/directives/*.js','README.md'],
options: {
destination: 'doc',
private: true
}
}
}