zepto 自定义模块 生成zepto.min.js (自己存个档,不想每次用的时候再去搜了)

本文介绍了如何在Linux和Windows环境下通过npm构建定制化的Zepto库。提供了详细的步骤说明,包括如何选择所需的模块进行编译,并附带了所有可用模块及其功能描述。

linux 下 在git clone 下来的 zepto文件夹 运行以下命令

MODULES="touch data fx detect" npm run-script dist

windows可能要改一下 make 源文件:

//make文件的第42行,在ie 后面加上你要增加的模块,然后重新执行命令即可:$ npm run-script dist

modules = (env['MODULES'] || 'zepto event ajax form ie detect fx fx_methods data selector touch').split(' ')

附一个modules全表格。

注意,event 模块是 ajax 的依赖,如果跳过event 去安装 ajax 可能会在使用时报错!!!建议不要跳过zepto 和event 。

moduledefaultdescription
zeptoCore module; contains most methods
eventEvent handling via on() & off()
ajaxXMLHttpRequest and JSONP functionality
formSerialize & submit web forms
ieSupport for Internet Explorer 10+ on the desktop and Windows Phone 8
detectProvides $.os</code> and <code>$.browser information
fxThe animate() method
fx_methods Animated show, hide, toggle, and fade*() methods.
assets Experimental support for cleaning up iOS memory after removing image elements from the DOM.
data A full-blown data() method, capable of storing arbitrary objects in memory.
deferred Provides $.Deferred promises API. Depends on the “callbacks” module.
callbacks Provides $.Callbacks for use in “deferred” module.
selector Experimental jQuery CSS extensions support for functionality such as $('div:first') and el.is(':visible').
touch Fires tap– and swipe–related events on touch devices. This works with both `touch` (iOS, Android) and `pointer` events (Windows Phone).
gestureFires pinch gesture events on touch devices
stackProvides andSelf & end() chaining methods
ios3 String.prototype.trim and Array.prototype.reduce methods (if they are missing) for compatibility with iOS 3.x.
/** Copyright © 2013-2021 DataYes, All Rights Reserved. */ /* eslint-disable */ const path = require('path'); const webpack = require('webpack'); const fs = require('fs'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ForkTSCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const { TsConfigPathsPlugin } = require('awesome-typescript-loader'); const WebpackBar = require('webpackbar'); const CaseSensitive = require('case-sensitive-paths-webpack-plugin'); const withCI = require('@dyc/adam-apple-ci/with-ci'); const withModernBuildOrNot = require('./with-modern'); const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin'); const compose = (...args) => (result) => args.reduceRight((result, fn) => fn(result), result); const theme = require('./theme'); const withDll = (webpackConfig) => { const glob = require('globby'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); const manifestJson = path.join(process.cwd(), 'node_modules/vender-dll/manifest.json'); if (!fs.existsSync(manifestJson)) { throw new Error('没有找到 node_modules/vender-dll/manifest.json, 尝试npm run build:dll'); } const manifest = path.resolve(process.cwd(), './node_modules/vender-dll/*.dll.js'); webpackConfig.plugins.push( new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require.resolve(path.join(process.cwd(), 'node_modules/vender-dll/manifest.json')), }) ); glob.sync(manifest).forEach((x, i) => { webpackConfig.plugins.push( new AddAssetHtmlPlugin({ filepath: x, includeSourcemap: false, }) ); }); return webpackConfig; }; const withDllOrNot = process.argv.includes('--no-dll') ? (i) => i : withDll; const withLazyBuild = (webpackConfig) => { const LazyCompilePlugin = require('lazy-compile-webpack-plugin'); webpackConfig.plugins.push(new LazyCompilePlugin()); return webpackConfig; }; const withLazyBuildOrNot = process.argv.includes('-l') ? withLazyBuild : (i) => i; module.exports = compose( withLazyBuildOrNot, withModernBuildOrNot({}), withDllOrNot, withCI )({ mode: 'development', devtool: 'eval-cheap-module-source-map', entry: path.join(process.cwd(), 'js/index'), output: { pathinfo: false, filename: 'static/js/[name].bundle.js', path: path.join(process.cwd(), 'build'), chunkFilename: 'static/js/[name].chunk.js', publicPath: '/', }, resolve: { symlinks: false, modules: ['node_modules', 'js', 'framework/src'], extensions: ['.js', '.ts', 'jsx', '.tsx'], plugins: [ new TsConfigPathsPlugin({ configFile: path.join(process.cwd(), 'tsconfig.json'), }), ], }, optimization: { minimize: false, }, plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', template: path.join(process.cwd(), 'public/index.html'), // favicon: path.join(process.cwd(), 'public/favicon.png'), chunks: ['vendor', 'main'], inject: true, }), new webpack.DefinePlugin({ __DEVELOPMENT__: true, __DEVTOOLS__: true, }), // new webpack.ProvidePlugin({ // jquery: path.join(process.cwd(), 'js/utils/zepto/zepto.min'), // }), // new BundleAnalyzerPlugin(), new ForkTSCheckerWebpackPlugin({ async: true, typescript: { enabled: true, mode: 'write-references', // profile: true, }, }), new WebpackBar({ // profile: true, name: require(path.join(process.cwd(), 'package.json')).name || 'client', }), new CaseSensitive(), new FriendlyErrorsWebpackPlugin(), new AntdDayjsWebpackPlugin({ replaceMoment: true, plugins: [ 'isSameOrBefore', 'isSameOrAfter', 'advancedFormat', 'customParseFormat', 'weekday', 'weekYear', 'weekOfYear', 'isMoment', 'localeData', 'localizedFormat', 'badMutable', 'isoWeek', 'dayOfYear', 'duration', 'relativeTime', 'isBetween', 'minMax', ], }), ], module: { noParse: [/jszip.js$/], rules: [ { test: /\.(t|j)sx?$/, use: [ 'cache-loader', { loader: 'thread-loader', // loaders with equal options will share worker pools options: { // the number of spawned workers, defaults to (number of cpus - 1) or // fallback to 1 when require('os').cpus() is undefined workers: 2, // number of jobs a worker processes in parallel // defaults to 20 workerParallelJobs: 50, // additional node.js arguments workerNodeArgs: ['--max-old-space-size=1024'], // Allow to respawn a dead worker pool // respawning slows down the entire compilation // and should be set to false for development poolRespawn: false, // timeout for killing the worker processes when idle // defaults to 500 (ms) // can be set to Infinity for watching builds to keep workers alive poolTimeout: 2000, // number of jobs the poll distributes to the workers // defaults to 200 // decrease of less efficient but more fair distribution poolParallelJobs: 50, // name of the pool // can be used to create different pools with elsewise identical options name: 'js-thread-pool', }, }, { loader: 'babel-loader', options: { cacheDirectory: true, }, }, ], exclude: /node_modules/, include: [path.resolve('js'), path.resolve('framework'), path.resolve('packages')], }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', { loader: 'less-loader', options: { javascriptEnabled: true, modifyVars: theme, }, }, ], }, { test: /\.(jpeg|png|jpg|gif|pdf|mp3|ogg|wav)$/, use: ['file-loader?name=[path][name].[ext]'], }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['url-loader?limit=10000&mimetype=application/font-woff'], }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['file-loader'], }, ], }, performance: { hints: false, }, devServer: { quiet: true, contentBase: process.cwd(), port: process.env.PORT || 3000, host: '0.0.0.0', hot: true, compress: true, stats: { colors: true, assets: false, modules: false, children: false, }, historyApiFallback: true, }, }); 把你刚才的改动放入文件中
最新发布
06-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值