# dkhs_npm

> dkhs common code

Latest version **1.0.65** (published 2019-08-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install dkhs_npm
pnpm add dkhs_npm
yarn add dkhs_npm
bun add dkhs_npm
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.65 |
| Published | 2019-08-15 |
| First published | 2019-07-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 90.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chenyanbin |
| Keywords | dkhs |

## Links

- npm: https://www.npmjs.com/package/dkhs_npm
- Repository: https://github.com/chenyanbin-dkhs/dkhs_npm
- Homepage: https://github.com/chenyanbin-dkhs/dkhs_npm#readme
- Issues: https://github.com/chenyanbin-dkhs/dkhs_npm/issues
- npm.io page: https://npm.io/package/dkhs_npm

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.5.5

## Recent versions

- 1.0.65 (latest) — 2019-08-15
- 1.0.64 — 2019-08-15
- 1.0.63 — 2019-08-12
- 1.0.62 — 2019-08-12
- 1.0.61 — 2019-08-12
- 1.0.60 — 2019-08-09
- 1.0.59 — 2019-08-09
- 1.0.58 — 2019-08-09
- 1.0.57 — 2019-08-09
- 1.0.56 — 2019-08-09
- 1.0.55 — 2019-08-09
- 1.0.54 — 2019-08-09
- 1.0.53 — 2019-08-09
- 1.0.52 — 2019-08-09
- 1.0.51 — 2019-08-09
- … 50 more at https://npm.io/package/dkhs_npm/versions

## README

# dkhs_npm
针对dkhs web放一些公共的代码，方便跨项目使用，比如一些model、api等代码

#### 1、初始化项目
`npm init`
```json
{
  "name": "dkhs_npm",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
}
```
> "types": "dist/index.d.ts" 这段话我是后面加的，一开始在dkhs_web调用中老是获取不到定义的类型，必须重新安装下 dkhs_npm就可以了
<br><br>
#### 2、安装typescript
`npm install -g typescript` 

配置tsconfig文件
```json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "module": "esnext",
        "target": "es5",
        "lib": ["es6", "dom"],
        "allowJs": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
	"jsx": "react",//重要
	"declaration": true,//重要
    },
    "include": ["./src/**/*"]
}
```
> 要设置declaration才会生成类型d.ts文件，一开始没有设置，导致在dkhs_web中使用interfaces时，一直没有任何类型提示

执行命令，把typescript转换为es5

`tsc`
> *Q1：tsc  -v命令行无效*  需要编辑环境变量：
```bash
open ~/.bash_profile; 
export PATH="$PATH:"/Users/chenyanbin/.npm-global/lib/node_modules/typescript/bin""; 
source ~/.bash_profile
``` 
或者：
```bash
/Users/chenyanbin/.npm-global/lib/node_modules/typescript/bin/tsc -v
```

> *Q2: Cannot use JSX unless the '--jsx' flag is provided* :  
 "jsx": "react",
#### 3、安装 [typedoc](https://typedoc.org/guides/installation/) 文档生成 (不是很好用)
`npm install typedoc --save-dev`

生成文档：

`typedoc  --out docs src`
> 代码在src目录，文档输出到docs目录

#### 4、创建和发布NPM包
https://www.npmjs.com/signup

`npm login`

`npm publish`
> 每次上传都要修改package.json中的version



#### 5、安装react
`npm install  --save-dev  react  react-dom`

#### 6、安装babel
- 安装babel7  
`npm install @babel/cli @babel/core --save-dev`

- 安装babel转换  
`npm install @babel/preset-env @babel/preset-react  @babel/preset-typescript --save-dev`

    - @babel/preset-env 会将代码转换为ES5

    - @babel/preset-react 转换REACT

- 创建.babelrc文件  
`touch .babelrc`
```json
{
	"presets": [
		"@babel/preset-react",
		"@babel/preset-env",
		[
			"@babel/preset-typescript",
			{
				"isTSX": true,
				"allExtensions": true
			}
		]
	]
}
```
- 编译ES5，生成主文件  
在src目录下创建一个index.tsx，并通过命令行在根目录下创建一个主文件index.js，对应
package.json 中的 "main": "index.js",  
`./node_modules/.bin/babel src/index.tsx   --out-file index.js`,    
或者在package.json里增加：  
"build": "./node_modules/.bin/babel src/ --extensions '.ts,.tsx' --out-file dist/index.js"  
然后执行：  
`npm run build`  
不过我们会用webpack来编译


#### 7、安装webpack
`npm install --save-dev webpack webpack-cli`  
`npm install --save-dev babel-loader ts-loader`
```js

module.exports = {
	entry: `./src/index.tsx`,
	output: {
		filename: 'index.js',
        path: path.resolve(`./dist`),
        libraryTarget: 'commonjs2' //重要
	},
	resolve: {
		extensions: ['.ts', '.tsx', '.js', '.json']
	},
	module: {
	}
};
```

编译： 

`webpack --mode production`

#### 8、开发联调
在本地开发npm模块的时候，我们可以使用npm link命令，将npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试

- 先在dkhs_npm下执行  
`npm link`  
输出：/Users/chenyanbin/.npm-global/lib/node_modules/dkhs_npm -> /Users/chenyanbin/Documents/dkhs/dkhs_npm
- 再在dkhs_web下执行  
`npm link dkhs_npm`
- 修改dkhs_npm下的代码，并执行tsc，就可以看到最新的代码了

#### 9、增加LINT检测
`npm install --save-dev prettier tslint tslint-config-prettier
`
新增tslint.json
```json
{
   "extends": ["tslint:recommended", "tslint-config-prettier"]
}
```
新增.prettierrc
```json
{
  "printWidth": 120,
  "trailingComma": "all",
  "singleQuote": true
}
```
修改package.json
```json
{
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
    "lint": "tslint  -p tsconfig.json"
  }
```
执行检测  

`npm run lint`

`npm run format`

#### 9、限制可访问的文件
通过.gitignore我们可以过滤一些不想上传到代码仓库的的文件。但是仍可以被外界访问到，比如node_modules仍可以在 import * from 'dkhs_npm/node_modules' 里被访问到。为了限制访问，有2种方法可以做到
-  新增.npmignore file  
```
src
tsconfig.json
node_modules
```

- 不过随着文件越来越多，得一直记得更新也麻烦，可以另外一种方法，
在package.json里增加  
```
“files”: ["src/**/*”]
```

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