dkhs_npm

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

1、初始化项目

npm init

{
  "name": "dkhs_npm",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
}

"types": "dist/index.d.ts" 这段话我是后面加的，一开始在dkhs_web调用中老是获取不到定义的类型，必须重新安装下 dkhs_npm就可以了

2、安装typescript

npm install -g typescript

配置tsconfig文件

{
    "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命令行无效 需要编辑环境变量：

open ~/.bash_profile; 
export PATH="$PATH:"/Users/chenyanbin/.npm-global/lib/node_modules/typescript/bin""; 
source ~/.bash_profile

或者：

/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 文档生成 (不是很好用)

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

{
	"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

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

{
   "extends": ["tslint:recommended", "tslint-config-prettier"]
}

新增.prettierrc

{
  "printWidth": 120,
  "trailingComma": "all",
  "singleQuote": true
}

修改package.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/**/*”]