@airtable/blocks-webpack-bundler
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

@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);
};

Readme

Keywords

none

Package Sidebar

Install

npm i @airtable/blocks-webpack-bundler

Weekly Downloads

876

Version

0.0.2

License

UNLICENSED

Unpacked Size

26.7 kB

Total Files

16

Last publish

Collaborators

  • carolinekimat
  • larsj-at
  • nabeelairtable
  • clementhoang-at
  • it.ops
  • blakethomson-at
  • willpowelsonat
  • emilia.gabryszewska
  • airtabledoug
  • airtable_ops_team_production
  • djmally-airtable
  • emma_airtable
  • richsinn
  • s2tephen
  • syrnick
  • manan_at
  • fredz-at
  • seankeenan-at
  • adarlieberdembo
  • kevinwilde-at