small

2019-09-12 admin

small是什么

什么是small,A tool to bundle commonjs files. Designed to produce the smallest file size possible.

small使用教程帮助文档

Small

Small is a CommonJS bundler that aims to generate the smallest bundle size. It supports commonjs files, and output as a standalone, commonjs, amd and universal package.

Features

  • Bundles CommonJS files
  • Small file size
  • Source map
  • Supports circular dependencies
  • Fits into gulp build system

How to install

npm install small or (for command line usage) npm install small -g

How to use

Command line: small -i index.js -o output.js (small --help for more info)

From Node:

var small = require('small');
small.compile('index.js', options, function(error) {
	if (error) throw error;
	console.log('Completed');
});

Or, as a gulp plugin:

var gulp = require('gulp');
var small = require('small').gulp; // <-- notice the '.gulp' part

gulp.task('scripts', function() {
	return gulp.src('lib/*.js')
		.pipe(small())
		.pipe(gulp.dest('release'));
});

This will create a bundle, starting with lib/index.js. The output is saved as release/index.js. You can customize this using the fileName (defaults to index.js) and options parameters:

		.pipe(small('foo.js', options))

Sourcemaps

The command line interface and Node api generate source maps by default. When using gulp, you can add gulp-sourcemaps to generate source maps:

var sourcemaps = require('gulp-sourcemaps');

gulp.task('scripts', function() {
	return gulp.src('lib/*.js')
		.pipe(sourcemaps.init())
		.pipe(small())
		.pipe(sourcemaps.write())
		.pipe(gulp.dest('release'));
});

Options

options in the examples above is an object with these properties:

outputFileName - The output filename(s). Example:

{
	standalone: 'output.js',
}

Or

{
	commonjs: 'output.commonjs.js',
	amd: 'output.amd.js',
	standalone: 'output.standalone.js',
	universal: 'output.universal.js'
}

Default: { standalone: startFileName }

exportPackage - Export the package with the specified name. You can specify different names for different targets. Example:

{
	commonjs: 'myCommonJSPackage',
	amd: 'myAMDPackage',
	standalone: 'myBrowserPackage'
}

Or

{
	universal: 'myPackage'
}

globalModules - Add external modules, which will not be included in the generated package. Example:

{
	'$': {
		commonjs: 'jquery',		// Output will be require('jquery')
		amd: 'jquery',			// Output will be define(['jquery'], ...)
		standalone: 'jquery'	// Output will be jquery
	}
}

Which is equal to

{
	'$': {
		universal: 'jquery'
	}
}

Then you can do:

var $ = require('$');

includeNode (boolean) - Whether to include the node core packages, like path. modulesDirectories (string[]) - Folder names which contain modules. Default: ['node_modules']. You can specify multiple names. varPrefix (string) - Small add some variables to the emitted code. These variables are prefixed with this prefix. Default: '__small$_'.

Loaders

Small doesn’t have loaders like browserify does. Instead you can use gulp. Example:

var gulp = require('gulp');
var small = require('small').gulp;
var ts = require('gulp-typescript');

gulp.task('scripts', function() {
	return gulp.src('lib/**.ts')
		.pipe(ts({ module: 'commonjs' })) // Compile typescript to javascript
		.pipe(small())
		.pipe(gulp.dest('release'));
});

Small file size

Small is designed to generate a small file size. Because of this, it might not work with all the projects. You can use it if:

  • You don’t use expressions in require, only string literals.
  • Your code doesn’t modify globals (like String). If globals are modified, make sure every file that uses these changes also requires the file that modified the global.

The following parts from CommonJS are not and (probably) won’t be supported:

  • module.id
  • module.uri
  • require(…expression…)
  • require.main
  • require.paths

About the generated JavaScript

Every module is wrapped in a closure. Every module looks like this:

(function() {
	var exports = {};
	// ...
	return exports;
})();

If necessary, Small automaticly adds a module.exports variable (__small$_moduleExports), but first Small tries to replace module.exports (and toplevel this) with exports. If that’s not safe, Small renames module.exports to __small$_moduleExports.

If possible, modules are placed in modules that use them, like this:

(function() {
	var exports = {};
	var otherFile = (function() { // was: var otherFile = require('./otherFile.js');
		var exports = {};
		// ...
		return exports;
	})();
	// ...
	return exports;
})();

This way it’s the easiest for minifier to understand the code.

If a file is required more then once, it will be assigned to a variable like __small$_1 (but that name will be mangled if you use a minifier).

Include Node

Set the includeNode option to true and you can require the default modules (like path). Node’s globals (__dirname, process) are not yet supported.

Todo

  • Conditional imports (like if (...) require('...'))
  • Include node globals when includeNode is set

License

Small is licensed under the MIT license.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74963.html

文章标题:small

相关文章
smallfox-processor-json
smallfox-processor-json是什么 什么是smallfox-processor-json,JSON processor for Smallfox projects smallfox-processor-json官网:官网...
2019-03-20
smallfox-processor-strings
smallfox-processor-strings是什么 什么是smallfox-processor-strings,String localization for Smallfox projects smallfox-processo...
2019-03-20
smallfox-cache
smallfox-cache是什么 什么是smallfox-cache,Cache managers for Smallfox projects smallfox-cache官网:官网 smallfox-cache源码仓库:源码仓库 sm...
2019-03-20
HTML <small> 标签
&lt;h3&gt;实例&lt;/h3&gt; &lt;p&gt;定义小型文本:&lt;/p&gt; &lt;pre class=“prettyprint”&gt;&lt;code&gt;&lt;p&gt; javascriptcn.com...
2019-03-31
smallfox-processor-images
smallfox-processor-images是什么 什么是smallfox-processor-images,Image integration for Smallfox projects smallfox-processor-im...
2019-03-20
smallfox-state
smallfox-state是什么 什么是smallfox-state,State functions for Smallfox projects smallfox-state官网:官网 smallfox-state源码仓库:源码仓库 s...
2019-03-20
really-small-events
really-small-events是什么 什么是really-small-events,A Tiny Typescript Event Library really-small-events官网:官网 really-small-eve...
2019-04-12
smallfox-taskrunner
smallfox-taskrunner是什么 什么是smallfox-taskrunner,Task runner for Smallfox projects smallfox-taskrunner官网:官网 smallfox-taskr...
2019-04-22
smallfox-types
smallfox-types是什么 什么是smallfox-types,Shared data types for Smallfox system smallfox-types官网:官网 smallfox-types源码仓库:源码仓库 s...
2019-04-22
smallfox-processor-postcss
smallfox-processor-postcss是什么 什么是smallfox-processor-postcss,PostCSS integration for Smallfox projects smallfox-processo...
2019-03-20
回到顶部