config Archives | JS FAQ - JavaScript Guides Online

How to use rollup plugins in your config

Rollup plugin configuration requires precise ordering to ensure correct module resolution, CommonJS conversion, and Babel transpilation. Proper chaining of CSS plugins like postcss and cssnano optimizes stylesheets. Custom plugins and hooks enhance build insights while avoiding side effects from improper plugin order is crucial.

Node.js Core

How to set environment variables for Node.js apps

Node.js Coreconfig, env, node.js, shell

Utilizing environment variables in Node.js applications enhances behavior and security. Access variables using the process.env object, handle undefined cases, and provide defaults to prevent errors. Use environment variables for feature toggling, manage configurations with JSON files, and create utilities for streamlined retrieval. Documenting variables is crucial for collaboration.

Transpilers: Babel

How to use Babel presets

Transpilers: Babelbabel, compatibility, config, presets

Optimize Babel configurations with the useBuiltIns option in @babel/preset-env to manage polyfills effectively. Choose between entry and usage modes to reduce bundle size. Combine presets and plugins for enhanced functionality, and leverage caching to improve build times. Tailor settings for monorepos using overrides for efficiency.

Libraries: Axios

How to set a request timeout in Axios

Libraries: Axiosaxios, config, delay, timeout

Handling timeout errors in Axios is essential for user experience. Implementing retry mechanisms, notification systems, and logging can enhance application resilience. Users receive immediate feedback during network issues, improving engagement. Effective error management strategies lead to better insights and informed decisions about application performance.

Code Quality: ESLint/Prettier

How to use ESLint with StandardJS

Code Quality: ESLint/Prettierconfig, eslint, standard, style

Code quality in a StandardJS environment is maintained by integrating ESLint into development workflows using pre-commit hooks like Husky, configuring ESLint reports for clarity, combining linting with testing frameworks such as Jest, thorough documentation, and regularly updating linting configurations.

Node.js Core

How to use “type”: “module” in package.json

Node.js Coreconfig, esm, node.js, package.json

Common ECMAScript module issues include the "Cannot use import statement outside a module" error caused by missing "type":"module" in package.json or absent type="module" in script tags. Node.js requires explicit file extensions in import paths. Circular dependencies and mixing CommonJS with ESM syntax also cause runtime errors.

Node.js Core

How to get environment variables in Node.js

Node.js Coreconfig, env, node.js, process.env

Effective management of environment variables in JavaScript applications is crucial for avoiding runtime errors and enhancing customization. Utilizing the logical OR operator allows for sensible defaults, while helper functions can validate the presence and format of variables. Centralizing configuration simplifies testing and reduces the risk of unexpected changes during runtime.

Code Quality: ESLint/Prettier

How to use ESLint with Airbnb style guide

Code Quality: ESLint/Prettierairbnb, config, eslint, style

Customizing ESLint rules enhances code quality and readability. Key configurations include enforcing consistent spacing with `space-infix-ops`, ensuring consistent returns with `consistent-return`, and promoting arrow functions with `prefer-arrow-callback`. Additional rules like `no-unused-vars` and `require-await` improve performance and prevent errors. Integrating Prettier streamlines formatting alongside linting. Documenting these rules aids team collaboration and maintains coding standards.

Bundlers: Webpack/Rollup

How to use plugins in Webpack

Bundlers: Webpack/Rollupconfig, features, plugins, webpack

Webpack plugin configuration involves importing plugins, instantiating them in the plugins array, and customizing options. Common plugins include CleanWebpackPlugin, HtmlWebpackPlugin, DefinePlugin, and MiniCssExtractPlugin for CSS extraction. Custom plugins tap into lifecycle hooks for tailored build processes.

Transpilers: Babel

How to set up Babel with package.json

Transpilers: Babelbabel, config, json, presets

Configuring Babel in your package.json streamlines project management by centralizing settings. Adding a "babel" key allows you to specify presets like @babel/preset-env, targeting modern browsers while optimizing bundle size. Options such as useBuiltIns and corejs enhance performance. Ideal for small to medium projects, this method simplifies the build process.