# @ice-age/ice

> A dev tools based on webpack for front end project

Latest version **1.1.1** (published 2022-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ice-age/ice
pnpm add @ice-age/ice
yarn add @ice-age/ice
bun add @ice-age/ice
```

Provides the command `ice`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-05-14 |
| First published | 2021-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 30 |
| Unpacked size | 437.9 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zhangzhengsmiling |
| Maintainers | zhangzhengsmiling |

## Links

- npm: https://www.npmjs.com/package/@ice-age/ice
- Repository: https://github.com/zhangzhengsmiling/ice
- Homepage: https://github.com/zhangzhengsmiling/ice#readme
- Issues: https://github.com/zhangzhengsmiling/ice/issues
- npm.io page: https://npm.io/package/@ice-age/ice

## Dependencies (30)

- [less](https://npm.io/package/less.md) ^4.1.2
- [sass](https://npm.io/package/sass.md) ^1.44.0
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [eslint](https://npm.io/package/eslint.md) ^8.2.0
- [ts-node](https://npm.io/package/ts-node.md) ^10.4.0
- [webpack](https://npm.io/package/webpack.md) ^5.64.4
- [commander](https://npm.io/package/commander.md) ^8.3.0
- [css-loader](https://npm.io/package/css-loader.md) ^6.5.1
- [img-loader](https://npm.io/package/img-loader.md) ^4.0.0
- [typescript](https://npm.io/package/typescript.md) ^4.4.4
- [url-loader](https://npm.io/package/url-loader.md) ^4.1.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.16.0
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [less-loader](https://npm.io/package/less-loader.md) ^10.2.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^12.3.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.3
- [cache-loader](https://npm.io/package/cache-loader.md) ^4.1.0
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.4
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.6.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.0
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^10.0.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^4.0.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.4.5
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.16.0
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^5.4.0
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^3.2.0
- [friendly-errors-webpack-plugin](https://npm.io/package/friendly-errors-webpack-plugin.md) ^1.7.0
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^5.4.0

## Recent versions

- 1.1.1 (latest) — 2022-05-14
- 1.1.0 — 2022-05-12
- 1.0.9 — 2022-03-30
- 1.0.7 — 2022-02-28
- 1.0.6 — 2022-02-28
- 1.0.5 — 2022-01-04
- 1.0.4 — 2021-12-31
- 1.0.3 — 2021-12-29
- 0.0.4 — 2021-12-29

## README

# ICE

<a href="https://www.npmjs.com/package/@ice-age/ice"><img alt="NPM Status" src="https://img.shields.io/npm/v/@ice-age/ice.svg?style=flat"></a>

ENGLISH | [简体中文](./README-zhCN.md)

## INTRODUCTION

### BASE

This is a package to help developers to run a react project.It is an encapsulation of webpack, so you can do anything that webpack can do by rewriting `ice.config.js`

`ATTENTION`: However, there are lots of things to be improved, so you'd better not to apply this package to production. You can use this package just for fun. Of course, welcome to try this package, and give some tips to me for improving!

### WHY DO I WRITE THIS PACKAGE?

It is useful when you are going to create a demo project.I do not want to create `webpack.config.js` and install dependencies again and again. So, I just write this package to encapsulate some base packages to `ice`, just used for building project.

## HOW TO START

1. You can install `ice` globally or locally

   Maybe there are some problems in global installing, you could try install locally

   ```shell
   yarn global add @ice-age/ice or yarn add @ice-age/ice -D
   ```

2. ensure your directory structure, here is a base structure to make sure you can run by `ice`.

   ```shell
   $ tree .
   .
   ├── ice.config.js
   ├── package.json
   ├── public
   │   └── index.html
   ├── src
   │   └── index.tsx
   └── yarn.lock
   ```

   Of Course, you can rewrite `ice.config.js` to customize to fit your project.(You may receive a mistake if you forget `ice.config.js` in current version)

3. Now you can run with `ice dev` or `yarn ice dev` to run your application

4. Here are some files for example:

   ```html
   <!-- publis/index.html -->
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta http-equiv="X-UA-Compatible" content="ie=edge" />
       <title><%= htmlWebpackPlugin.options.title %></title>
       <script src="<%= htmlWebpackPlugin.options.configPath %>"></script>
     </head>
     <body>
       <div id="root"></div>
     </body>
   </html>
   ```

   ```javascript
   // ice.config.js
   /* eslint-disable @typescript-eslint/no-var-requires */
   /*eslint-env node*/
   const path = require('path')
   const { merge } = require('webpack-merge')
   
   module.exports = (config) => {
     console.log(config)
     const _config = {
       entry: path.resolve(__dirname, './src/app.tsx'),
       output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'bundle.[chunkhash:8].js',
       },
     }
   
     return merge(config, _config)
   }
   ```

## SCRIPTS

Here are some scripts that has been integrated to `ice`. You can use the following scripts when you have installed `ice`. Here are some scripts listed briefly(Of course, you can run script `ice --help` to get detailed information.):

### ice init

You can download template project by running this script which is integrated with ice tools. More reference: [https://github.com/zhangzhengsmiling/react-template](https://github.com/zhangzhengsmiling/react-template)

### ice dev

Start project just like `create-react-app`.It will start webpack dev server.It equals to running script ` webpack serve`. You can also run `tsc --watch` to start type checking.

### ice build

A script to build you project. You can write your own config files in `ice.config.js` to customize your own process of building.

### ice lint <directory> [options]

Lint script, it can be used just like `eslint`, and it encapsulates some eslint config.

You can run eslint by script, `ice lint src --ext .tsx,.ts`.Besides you can get more details by running `ice lint --help`.

### ice ci [options]

`ci` script provides toolkit for front end engineering. 

#### SUPPORT LIST:

- --husky

- --commitizen

- --commitlint

- --standard-version

Here are some options you can pass to the command (also you can get more information by `ice ci -h`):

#### 1. ice ci --husky

- First, it will chekout whether there is 'husky' fileld in your package.json.If so, it will skip whithout installing dependencies or writing 'commit-msg'
- If you have nerver installed `husky`, it will install `husky@4.3.6` by yarn.
- Then, it will writing `commit-msg` hook to your package.json, and please make sure you have installed commitment by `ice ci --commitilint` or manually.

*NOTES:* The version of husky is 4.3.6, and it maybe cause errors by upgrade to 5.0. If you want to use husky of higher version, maybe you can turn to official document for help.

#### 2. ice ci --commitizen

- First, it will checkout whether there is 'config' filed in your package.json.If so, it will skip too.
- If not, it will instlall `commitizen` and `cz-conventional-changelog` and writing config of `commitizen` to your package.json.
- Then you can run `git cz` for testing.

#### 3. ice ci --commitlint

- It will install packages directly, `@commitlint/config-conventional` and `@commitlint/cli`.
- And Then it will create '.commitlinttc.js' file on your word directory.

#### 4. ice ci --standard-version

- First, it will install packages, `standard-version`
- And add script 'release: yarn standard-version' to the field 'scripts' of your packages.json.
- If 'release' field has already been used, you can add manually.

#### NOTES：

Scripts of all may cause the fields of package.json sorting again. Because, it may convert json string into object, and then  it will parse object into json string.

---
_Source: https://npm.io/package/@ice-age/ice · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._