# ds_chonky Latest version **1.0.4** (published 2024-02-05) · ISC license · 0 weekly downloads ## Install ```sh npm install ds_chonky pnpm add ds_chonky yarn add ds_chonky bun add ds_chonky ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.4 | | Published | 2024-02-05 | | First published | 2024-02-04 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 27 | | Unpacked size | 470.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | cnboker | ## Links - npm: https://www.npmjs.com/package/ds_chonky - npm.io page: https://npm.io/package/ds_chonky ## Dependencies (27) - [tsdef](https://npm.io/package/tsdef.md) ^0.0.14 - [shortid](https://npm.io/package/shortid.md) ^2.2.16 - [filesize](https://npm.io/package/filesize.md) ^8.0.6 - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [fast-sort](https://npm.io/package/fast-sort.md) ^3.1.1 - [react-dnd](https://npm.io/package/react-dnd.md) 11 - [react-jss](https://npm.io/package/react-jss.md) ^10.9.0 - [classnames](https://npm.io/package/classnames.md) ^2.3.1 - [exact-trie](https://npm.io/package/exact-trie.md) ^1.0.13 - [hotkeys-js](https://npm.io/package/hotkeys-js.md) ^3.8.7 - [react-intl](https://npm.io/package/react-intl.md) ^5.24.0 - [react-redux](https://npm.io/package/react-redux.md) ^7.2.6 - [redux-watch](https://npm.io/package/redux-watch.md) ^1.2.0 - [fuzzy-search](https://npm.io/package/fuzzy-search.md) ^3.2.1 - [react-window](https://npm.io/package/react-window.md) ^1.8.6 - [@mui/material](https://npm.io/package/@mui/material.md) ^5.14.12 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.1 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0 - [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.7.1 - [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.13.0 - [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.14.12 - [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) 11 - [react-virtualized-auto-sizer](https://npm.io/package/react-virtualized-auto-sizer.md) ^1.0.6 - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.12 - [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.32 - [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.13.1 - [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) 5.13.1 ## Recent versions - 1.0.4 (latest) — 2024-02-05 - 1.0.3 — 2024-02-05 - 1.0.2 — 2024-02-05 - 1.0.1 — 2024-02-05 - 1.0.0 — 2024-02-04 ## README # react+typescript+webpack Boilerplate This boilerplate could help you start to play react with Hot reload ## Getting Started Create a new directory then ``` bash npm init -y ``` ## Dependencies ### Install dependencies ``` bash npm install react@latest react-dom@latest react-hot-loader ``` ### Install development dependenices Babel ```bash npm install webpack webpack-cli web-dev-server html-webpack-plugin --save-dev ``` ESLint Airbnb ```bash npx install-peerdeps --dev eslint-config-airbnb npx install babel-eslint --save-dev ``` Cross-env ```bash npm install cross-env -save-dev ``` ### Setup create .babelrc.json ``` json { "presets":[ "@babel/preset-env", "@babel/preset-react" ], "plugins":[ "react-hot-loader/babel" ] } ``` create .eslintrc.json ```json { "parser": "babel-eslint", "extends": ["airbnb"], "env": { "browser": true }, "rules": { "arrow-parens": "off", "comma-dangle": ["error", "never"], "no-confusing-arrow": "off", "no-unused-expressions": "off", "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], "react/jsx-one-expression-per-line": "off" }, "plugins": [ "react" ] } ``` webpack.config.js ``` javascript const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { env } = process; const path = require('path'); const options = { mode: env.NODE_ENV, entry: "./index.js", output: { filename: 'index.js', path: path.resolve(__dirname, 'dist'), publicPath: '/', }, module: { rules: [ { test: /\.(js|jsx)$/, loader: "babel-loader", exclude: /node_modules/ }, //To allow Webpack to load Typescript files, Let's add support for the .ts and tsx extensions { test: /\.(tsx|ts)$/, loader: "ts-loader", exclude: /node_modules/, }, ], }, resolve: { extensions: ["*", ".js", ".jsx", ".tsx", ".ts"], }, plugins: [ new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV), }), new CleanWebpackPlugin(), new HtmlWebpackPlugin() ], devServer: { hot: true, }, devtool: env.NODE_ENV === "development" ? "source-map" : undefined, }; module.exports = options; ``` package.json ``` json #script section explain "scripts": { "clean": "rimraf dist", //启动example做扩张程序 "start": "cross-env NODE_ENV=development webpack-dev-server --hot", "build": "cross-env NODE_ENV=development webpack", //生成库文件为第三方程序引用 "pub": "npm run clean && tsc -p .", "lint": "eslint ./src" }, ``` ### Installing typescript ```bash npm install --save-dev @types/react @types/react-dom ``` create tsconfig.json file like so: ```json { "complierOptions":{ //generate .d.ts filest "declaration":true, "strict":true, "moduleResolution":"node", "rootDir":"./src", "sourceMap":true, "jsx":"react", "target":"ES6", "noResolve": false, "noImplicitAny": false, "removeComments": true, "outDir": "dist", // interop between ESM and CJS modules. Recommended by TS "esModuleInterop": true, "importHelpers": true, // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS "skipLibCheck": true, // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc` // "noEmit": true, "skipDefaultLibCheck": true, "strictNullChecks": false } } ``` * How/where to download your program * Any modifications needed to be made to files/folders ### Executing program * lib test ```bash npm start ``` * lib publish ``` bash npm run pub ``` --- _Source: https://npm.io/package/ds_chonky · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._