[JavaScript知识库]ts-react上线发布配置

运行流程

1、将tsx文件转化为jsx

• 新建tsconfig.build.json

• 	{
  		“compierOptions”:{
  			// 文件的输入路径
  			“outDir”:“build”,
  			// 输出的类型
  			“module”:”esnext”,
  			// 指定编译后的ES版本
  			“target”:”es5”,
  			// 获得ts类型支持,(会给每个ts文件生成一个d.ts文件)
  			“declaration”:true,
  			“jsx”:”react”,
  			// 修改模块的编译方式 -six
  			“moduleResolution”:”node”,
  			// 支持 默认导入 React ,不加*的那种 -six
  			“allowSyntheticDefaultImports”:true
  		},
  		// 包含哪些文件
  		“include”:[
  			“src”
  		],
  		// 不希望编译的文件
  		“exclude”:[
  			“src/**/*.test.tsx”,
  			”src/**/*.stories.tsx”,
  		]
  	}
  	```
  

• 修改 package.json

•   “scripts”:{
    	...,
    	”build-ts”:”tsc -p tsconfig.build.json”
    }
  

2、生成样式文件

• 修改 package.json

•  “scripts”:{
   	...,
   	
   	“build”:”npm run build-ts && build-css”,
   	// node-sass 源文件 目标文件
   	”build-css”:”node-sass ./src/styles/index.scss ./build/index.css”
   }
  

3、提升效率-自动删除build文件夹

• 由于windows不兼容rm-rf的命令，所以需要安装一个rm-rf的插件

•   yarn add rimraf -D	
  

• 修改 package.json

•   “scripts”:{
    	...,
    	“clean”:”rimraf ./build”,
    	“build”:”npm run clean && build-ts && build-css”,
    }
  

4、本地测试

• 修改 package.json

•   ...,
    “main”:”build/index.js”,
    “module”:”build/index.js”,
    “types”:”build/index.d.ts”,
  

• npm link
• • 在需要被测试的文件夹根目录运行npm link，（会创建软连接到全局）
• • 要使用组建的地方 运行 npm link xxxx
• npm link 报错 （版本不一致）解决办法
• npm link ../使用组件/node_modules/react