이 글은 webpack을 사용하여 jquery 플러그인을 개발하는데 필요한 환경과 구성에 대해 설명하고 있습니다.
고객은 트리 구조와 확인란이 있는 드롭다운 선택 컨트롤이 필요합니다. 인터넷에서 select2와 자동 완성 기능을 찾았지만 둘 다 요구 사항을 충족하지 못했습니다. 그래서 저는 ztree와 부트스트랩 드롭다운의 조합을 사용하여 드롭다운 트리 선택 컨트롤을 개발했습니다. 패키징에는 webpack을 사용하고, 완전한 jquery 컨트롤을 개발하고, webpack을 체계적으로 배우기로 결정했습니다.
디렉토리 구조:
package.json 구성:
{ "name": "select-tree", "version": "0.0.1", "description": "下拉树形选择,带复选框", "license": "MIT", "author": "kaikai", "repository": "https://gitee.com/hkgit/select-tree", "scripts": { "start": "webpack --watch", "build": "webpack --config webpack.config.js" }, "dependencies": { "jquery": "~1.12.4", "bootstrap": "^3.3.7", "jquery-slimscroll": "latest", "ztree": "latest" }, "devDependencies": { "css-loader": "^0.28.7", "html-webpack-plugin": "^2.30.1", "style-loader": "^0.19.1", "uglifyjs-webpack-plugin": "^1.1.4", "webpack": "^3.10.0" }, "bugs": { "url": "https://gitee.com/hkgit/select-tree/issues" }, "keywords": [ "javascript", "select", "tree", "checkbox" ] }
참고: jquery는 IE9 브라우저와 호환되도록 버전 1.12를 사용하며, 개발 환경은 상대적으로 규모가 작기 때문에 webpack의 Watch 모드를 사용합니다. 디버깅에 사용됩니다. dist/select-tree.html 파일을 엽니다.
webpack.config.js 코드:
const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = { entry: { vendor: ['jquery'], // 把需要引入的插件单独分出一个入口,和插件主体分开 main: './src/select-tree.js' }, output: { filename: 'select-tree-min.js', path: path.resolve(__dirname, './dist'), library: 'selectTree', // 插件名称 libraryTarget: 'umd' // 插件支持CommonJS2,CommonJS,amd,var }, // resolve: { // npm下载的jquery不需要制定路径 // modules: [path.join(__dirname, "node_modules")], // alias: { // jquery: 'jquery/dist/jquery.js' // } // }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] }, plugins: [ new HtmlWebpackPlugin({ // 自动生成html template: './src/select-tree.html', filename: 'select-tree.html' }), new UglifyJSPlugin({ // 压缩代码 sourceMap: true }), new webpack.optimize.CommonsChunkPlugin({ // 单独打包jq插件,此插件的依赖库单独抽出来,不影响插件的开发 name: "vendor", filename: "vendor.min.js" }), new webpack.ProvidePlugin({ // 自动加载jq $: 'jquery', jQuery: 'jquery' }) ], devtool: 'source-map' // 方便调试 };
위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
response.body가 필요한 이유 ().string( )을 여러 번 호출할 수 없나요?
Vue 구성 요소를 사용하여 달력을 구현하는 방법(자세한 튜토리얼)
위 내용은 webpack에 jquery 플러그인에 대한 환경 구성이 있습니다(자세한 튜토리얼).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!