Socket
Socket
Sign inDemoInstall

@airtable/blocks-webpack-bundler

Package Overview
Dependencies
9
Maintainers
29
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @airtable/blocks-webpack-bundler

Webpack bundler for @airtable/blocks-cli


Version published
Weekly downloads
608
increased by433.33%
Maintainers
29
Created
Weekly downloads
 

Readme

Source

@airtable/blocks-webpack-bundler

This is a webpack bundler that can be used with @airtable/blocks-cli@beta. This bundler allows you to customize the webpack config that is used when developing and bundling your Airtable app.

Installation

Install this package as a dependency of your Airtable app. Inside your app project folder, run

npm install @airtable/blocks-webpack-bundler --save-dev

Customization

  • Create a file named bundler.js inside your app project folder with the following contents:
const createBundler = require('@airtable/blocks-webpack-bundler').default;

function createConfig(baseConfig) {
    // Add any desired customizations here
    return baseConfig;
}

exports.default = () => {
    return createBundler(createConfig);
};
  • Inside your block.json file, add a "bundler" field, with a "module" field inside that points to your bundler file.
{
    "version": "1.0",
-   "frontendEntry": "./frontend/index.js"
+   "frontendEntry": "./frontend/index.js",
+   "bundler": {
+       "module": "./bundler.js"
+   }
}

Example

Here are some examples of how you can customize the webpack config via the bundler.js file.

Support Sass/SCSS files:

const createBundler = require('@airtable/blocks-webpack-bundler').default;

function createConfig(baseConfig) {
    baseConfig.module.rules.push({
        test: /\.s[ac]ss$/i,
        use: [
            // Make sure you have installed these loaders in your package.json as well!
            // See https://webpack.js.org/loaders/sass-loader/ for more info
            'style-loader',
            'css-loader',
            'sass-loader',
        ],
    });
    return baseConfig;
}

exports.default = () => {
    return createBundler(createConfig);
};

Support using flow to write your app:

const createBundler = require('@airtable/blocks-webpack-bundler').default;

function createConfig(baseConfig) {
    baseConfig.module.rules.push({
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: 'babel-loader',
        options: {
            babelrc: false,
            configFile: false,
            presets: [
                require.resolve('@babel/preset-env'),
                require.resolve('@babel/preset-react'),
                // Make sure you have installed this in your package.json by running
                // `npm install @babel/preset-flow --save-dev`
                require.resolve('@babel/preset-flow'),
            ],
        },
    });
    return baseConfig;
}

exports.default = () => {
    return createBundler(createConfig);
};

FAQs

Last updated on 16 Mar 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc