BLOG META

How to develop a Gutenberg plugin without node_modules

So I have struggled with this for a long time now.

The idea is to have your package.json, webpack.config.js, .babelrc files etc and execute

npm link autoprefixer
npm link babel-core
npm link babel-eslint
npm link babel-loader
npm link babel-plugin-transform-object-rest-spread
npm link babel-plugin-transform-react-jsx
npm link babel-plugin-transform-runtime
npm link babel-preset-env
npm link babel-runtime
npm link cross-env
npm link css-loader
npm link extract-text-webpack-plugin
npm link node-sass
npm link postcss-loader
npm link raw-loader
npm link sass-loader
npm link style-loader
npm link webpack

Of course packages and version would have to match the webpack .. babel you are going to use

Our webpack for version 3

const path = require( 'path' ); const webpack = require( 'webpack' ); const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); // Set different CSS extraction for editor only and common block styles const blockCSSPlugin = new ExtractTextPlugin( { filename: './dist/block_player.css', } ); // Configuration for the ExtractTextPlugin. const extractConfig = { use: [ { loader: 'raw-loader' }, { loader: 'postcss-loader', options: { plugins: [ require( 'autoprefixer' ) ], }, }, { loader: 'sass-loader', query: { outputStyle: 'production' === process.env.NODE_ENV ? 'compressed' : 'nested', }, }, ], }; module.exports = { entry: { './dist/block_player' : './gutenberg/block_index.js', }, output: { path: path.resolve( __dirname ), filename: '[name].js', }, watch: true, devtool: 'cheap-eval-source-map', module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', }, }, { test: /block_player\.s?css$/, use: blockCSSPlugin.extract( extractConfig ), }, ], }, plugins: [ blockCSSPlugin ], };

install script

npm i -g autoprefixer
npm i -g babel-core^6.25.0
npm i -g babel-eslint
npm i -g babel-loader
npm i -g babel-plugin-transform-object-rest-spread
npm i -g babel-plugin-transform-react-jsx
npm i -g babel-plugin-transform-runtime
npm i -g babel-preset-env
npm i -g babel-runtime
npm i -g cross-env
npm i -g css-loader
npm i -g extract-text-webpack-plugin
npm i -g node-sass
npm i -g postcss-loader
npm i -g raw-loader
npm i -g sass-loader
npm i -g style-loader
npm i -g webpack^3.12.0

have fun

{"type":"main_options","images_arr":"'#ffffff'","enable_ajax":"off","soundcloud_apikey":"","bg_isparallax":"off","bg_slideshow_time":"0","bg_transition":"slidedown","site_url":"http:\/\/digitalzoomstudio.net","theme_url":"http:\/\/digitalzoomstudio.net\/wp-content\/themes\/qucreative\/","blur_ammount":"26","width_column":"50","width_section_bg":"","width_gap":"30","border_width":"0","border_color":"#ffffff","translate_cancel_comment":"Cancel reply","translate_leave_a_comment":"Leave a comment","translate_leave_a_comment_to":"Leave a comment to","is_customize_preview":"off","width_blur_margin":"30","gallery_w_thumbs_autoplay_videos":"off","enable_native_scrollbar":"on","content_enviroment_opacity":"30","menu_enviroment_opacity":"70"}
{"type":"darkfull"}