wp-webpack-script

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 农飞尘
操作系统 跨平台
开源组织
适用人群 未知
 软件概览


visit our website wpack.io for documentation and usage

wpack.io - Modern JavaScript tooling for WordPress

What is wpack.io?

Put simply, wpack.io is a nodejs based build tool to ease up using modern javascriptin WordPress Themes and Plugins. It gives a fine Developer Experience (DX) anda single dependency for all your bundling requirement.

It is a fine-tuned webpack/browser-sync configuration made specifically forWordPress Theme and Plugin Development.

With the rise of Gutenberg editor, the usage of modern JavaScript and librarieslike react is imminent. The goal of this tooling is to:

  • Provide out of the box compiling and bundling of all front-end assets.
  • Give best in class Developer Experience (DX).
    • Hot Module Replacement and Live Reload.
    • Compile files on save.
    • Work on any local development server.
  • Support modern and useful concepts like modules, tree-shaking, dynamic import etc.

and eliminate the pain points such as:

  • Boilerplate for setting up your project.
  • Doing a lot of configuration to setup webpack.
  • A lot of things to hook webpack with browsersync. We can not safely have webpack dev server because it doesn't reload for PHP files.
  • A lot of dependencies like babel, webpack loaders and what not.

What is supported out of the box

  • �� Have Create React App like developer experience for WordPress Plugin/Theme development.
  • �� Consume all the modern packages from npm registry.
  • �� Write javascript with modern ES2018 (ES6+) syntax and compile it down to ES5 (or in accordance to your .browserslistrc).
  • �� Automatically minify and bundle code with webpack.
  • �� Split large files automatically and have PHP library to wp_enqueue_script all generated parts.
  • �� Use SASS/SCSS language to create stylesheets.
  • �� Use postcss autoprefixer to automatically make your CSS work with needed vendor prefixes.
  • �� Implement all the above to your existing wamp, mamp, vvv (basically any) dev server.
  • �� Create production grade, super optimized and minified files with one command (hello CI).

Here are a few more bonus you get for using wpackio.

  • �� Using ES6 Modules you will never run into namespace collision.

    Remember when that third-party plugin was using that old version of foo library which causedyour system to completely fail? No more!.

  • �� Zero configuration for a sane default of all the tooling involved (babel, sass, webpack).
  • �� Your CSS/SCSS changes will reflect instantly.
  • �� Typescript and Flowtype to take your js carrier to the next level. This tooling itself is written in typescript �� .
  • �� All the stuff you need to start developing using react. Hello Gutenberg!

Getting Started

Everything is documented in our website.

TL;DR

  • Add @wpackio/scripts to a project by running this.
    npx @wpackio/cli
    and after that
    npm run bootstrap
  • Edit the wpackio.project.js file to write your javascript entry-points.
  • Use wpackio/enqueue from composer to consume the assets.
  • Start the server using npm start.
  • Create production file using npm run build.

How wpack.io solves the problems?

Behind the scene wpack.io uses webpack along withbrowsersync.

It doesn't concern itself with providing boilerplate or starter templates. Itassumes that you (the awesome developer ��‍�� || ��‍��) is already doing that and what youwant is a simple to configure, yet hackable to the core tooling for bundlingall your frontend assets (js, css, images, svgs) in the most optimized way andmake it work within your WordPress theme or plugin.

Keeping that in mind, wpack.io provides three dependencies for your projects:

  1. @wpackio/entrypoint - As main dependency of your package.json.
  2. @wpackio/scripts - As main dev dependency of your package.json.
  3. wpackio/enqueue - As main dependency of your composer.json.

The first handles all the tasks for building the assets and providing a damngood DX.

The second handles enqueuing the assets using WordPress' API (wp_enqueue_scriptand wp_enqueue_style).

Both the tools communicate with each other through the means of manifest.jsonfile. The first tell the later which files to consume and the later publicPathto the first.

See it in action

We have examples inside examples directory of this repo. Each ofthem has instructions in the readme file, so be sure to check out.

npx @wpackio/cli

Add wpack.io into any existing or new project. This command has to be runfrom within the project.

npm run bootstrap / yarn bootstrap

Bootstrap needed dependencies, dev dependencies according to the type of yourproject. This command is enabled by npx @wpackio/cli.

Setup JS entry-points

Talking about example in plugins, we setup the entry-pointsin wpackio.project.js file.

module.exports = {
	// Project Identity
	appName: 'wpackplugin', // Unique name of your project
	type: 'plugin', // Plugin or theme
	slug: 'wpackio-plugin', // Plugin or Theme slug, basically the directory name under `wp-content/<themes|plugins>`
	// Used to generate banners on top of compiled stuff
	bannerConfig: {
		name: 'WordPress WebPack Bundler',
		author: 'Swashata Ghosh',
		license: 'GPL-3.0',
		link: 'https://wpack.io',
		version: '1.0.0',
		copyrightText:
			'This software is released under the GPL-3.0 License\nhttps://opensource.org/licenses/GPL-3.0',
		credit: true,
	},
	// Files we need to compile, and where to put
	files: [
		// App just for showing react
		{
			name: 'reactapp',
			entry: {
				main: ['./src/reactapp/index.jsx'],
			},
		},
	],
	// Output path relative to the context directory
	// We need relative path here, else, we can not map to publicPath
	outputPath: 'dist',
	// Project specific config
	// Needs react?
	hasReact: true,
	// Needs sass?
	hasSass: true,
	// Externals
	externals: {
		jquery: 'jQuery',
	},
	// Webpack Aliases
	alias: undefined,
	// Show overlay on development
	errorOverlay: true,
	// Auto optimization by webpack
	// Split all common chunks with default config
	// <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
	// Won't hurt because we use PHP to automate loading
	optimizeSplitChunks: true,
	// Usually PHP and other files to watch and reload when changed
	watch: 'inc/**/*.php',
	// Hook into babeloverride so that we can add react-hot-loader plugin
	jsBabelOverride: defaults => ({
		...defaults,
		plugins: ['react-hot-loader/babel'],
	}),
};

Setup PHP Library to consume build files

Now we do

composer require wpackio/enqueue

to install PHP Consumer Library.We instruct it to load files the right way (using WordPress APIs likewp_enqueue_script and wp_enqueue_style).

<?php
/*
Plugin Name: WPackIo Sample
Plugin URI: https://wpack.io
Description: A sample to demonstrate wpackio
Version: 0.1.0
Author: Swashata Ghosh
Author URI: https://swas.io
Text Domain: wpack-io
Domain Path: /languages
*/
// Assuming this is the main plugin file.

// Require the composer autoload for getting conflict-free access to enqueue
require_once __DIR__ . '/vendor/autoload.php';

// Do stuff through this plugin
class MyPluginInit {
	/**
	 * @var \WPackio\Enqueue
	 */
	public $enqueue;

	public function __construct() {
		// It is important that we init the Enqueue class right at the plugin/theme load time
		$this->enqueue = new \WPackio\Enqueue( 'wpackplugin', 'dist', '1.0.0', 'plugin', __FILE__ );
		// Enqueue a few of our entry points
		add_action( 'wp_enqueue_scripts', [ $this, 'plugin_enqueue' ] );
	}


	public function plugin_enqueue() {
		// Enqueue the `main` entry from `reactapp` file entry.
		$this->enqueue->enqueue( 'reactapp', 'main', [] );
	}
}


// Init
new MyPluginInit();

npm start / yarn start

After configuring all entry-points and using the PHP library for consuming, westart the development server.

HMR

We edit the files and with proper setup, we can see things load live, withoutpage refresh. It is called, Hot Module Replacement (HMR).

In the above image we see, we are changing the label of from Todo App toAwesome todo. The changes are reflected live on the page, without any page-reload.

Stop Dev Server

Once done, we press Ctrl + c to stop it.

npm run build / yarn build

Now we create production build.

Our plugin/theme is now ready to go live.

Learn more

This Readme is not an extensive source of documentation. Please visit our websitewpack.io to learn more.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! �� [Become a backer].


Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]. (please ask your company to also support this open source project by becoming a sponsor).


  • 工作中需要查看一些网站的JS语句,打心眼里对这种语法充满了鄙夷,优雅跟它没关系,一些烂写法很难读懂,简直就是反人类,太变态了。 下面举个小例子,因为篇幅原因,就复制了一小段,看看你能看懂多少? (window.webpackJsonp = window.webpackJsonp || [ ]).push([[36], { 1161: function (e, t) { //some codes }

  • const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装 const webpack = require('webpack'); //访问内置的插件 const path = require('path'); const config = { entry: './path/to/my/entry/file.js

  • Webpack中入口的index.html中script标签的js如何打包? webpack构建一个angular项目,入口文件为index.html 里面用了script标签 引入../public/js/main.js的静态标签 在生产者模式时,这些js和相关的png不会打包到dist文件夹中。 即访问localhost:xxxx时会出现访问../public/js/main.js 404的错

  • BUUCTF [网鼎杯 2018]Fakebook 1 一.进入后,按人家网页,先注册个账号,再进入主页,发现url上有注入点no,而且试一下,是一个非常常规的注入 1.先order by ,可以发现有4列 2.接着  no=-1 union/**/select 1,2,3,4#过滤了(union select)用/**/代替空格    发现回显位为2,而且有反序列函数unserialize()

  • 使用HtmlWebpackPlugin可以重构入口html,动态添加<link>和<script>,在以hash命名的文件上每次编译都会改变hash值 HtmlWebpackPlugin的配置参数如下 名称 类型 默认 描述 title {String} Webpack App 设置生成的HTML文件的title标签 filename {String} 'index.html' 设置生成的HTML

  • 'use strict' const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const baseWebpa

  • Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。 直接上码: const path = require('path'); const MiniCssExtractPl

  • webpack:package.json中scripts的作用 为了在执行命令的时候输入太长的命令,我们可以将要执行的命令配置到 package.json的scripts中,因为scripts中配置可以 以键值对(key:value)的形式来取“别名”,在用npm run scripts中的key的时候,就相当于执行scripts的key键对应的value值,起到 达到“执行短的代码,起到相同的作

  • wp_register_script是一个脚本注册函数,注册完之后可以使用wp_enqueue_script去挂载脚本,使用wp_register_script可以有效的避免脚本在代码块重复的问题。 用法 wp_register_script( string $handle, string|bool $src, array $deps = array(), string|bool|null $ve

  • script-ext-html-webpack-plugin的使用 在webpack.config.js中使用 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); new ScriptExtHtmlWebpackPlugin({ custom: { test: /\.js$/, attribut

 相关资料
  • 比较高级, 比较漂亮也比较有用的一个反垃圾留言插言. 比较著名的reCAPTCHA为Wordpress提供. 但个人觉得太干扰用户了, 尤其是那个验证码, 留个言还要考验用户的视力和英文书法识别能力. 有够累

  • wp-spp:用C++写的一个Wordpress的搜索引擎,用了boost的正则表达式库和libmysql++,支持关键字高亮显示,速度比Wordpress自带的PHP搜索功能大约快一个数量级。

  • WP Editor.md 说明 Description WP Editor.md是一个漂亮又实用的在线Markdown文档编辑器。 WP Editor.md is a beautiful and practical Markdown document editor. 基于Editor.md构建对WordPress平台的支持。 Build support for the WordPress on E

  • WP-ShortStat是一个不错的WordPress访问统计插件,可以在WordPress的管理界面中显示简单的访问统计信息 WP-ShortStat的安装和使用非常简单,步骤如下: 1、下载插件文件wp-shortstat.php ; 2、上传wp-shortstat.php文件到WordPress根目录的wp-content/plugins/目录中; 3、进入WordPress管理界面的Pl

  • solitaire-wp 是一个游戏开发包, Solitaire XNA 演示了在 Windows Phone 7 上使用 XNA Game Studio 4.0 来实现 2D 纹理纸牌游戏(下图所示)。

  • Drumkit XNA 是一款虚拟的打击乐软件,通过记录你拍打的节拍形成曲子,同时你还可以在上面录音。