venus-scripts

前期准备工作

• 项目的开发目录要求

  - src
    + index.ts
  - tests
    + index.test.ts
  - package.json
  - README.md
  - index.js

  - packages
    + project
      - src
        + index.ts
      - tests
        + index.test.ts
      - package.json
      - README.md
      - index.js
    + project2
    - src
      + index.ts
    - tests
      + index.test.ts
    - package.json
    - README.md
    - index.js
  - lerna.json
  - package.json

• package.json 增加rollup配置

"scripts": {
  "bootstrap": "venus-scripts bootstrap",
  "build": "venus-scripts build -- --cjs",
  "test": "venus-scripts test",
  "lint": "tslint -p tsconfig.json",
  "circularDeps": "madge --circular src/index.ts"
},
"main": "index.js",
"module": "dist/index.esm.js",
"typings": "dist/index.d.ts",
"files": [
  "dist/",
  "index.js",
  "README.md",
  "package.json"
],
"pre-commit": {
  "silent": true,
  "run": [
    "circularDeps",
    "lint",
    "test"
  ]
},
"publishConfig": {
  "registry": "http://npm.venus.org/",
  "access": "public"
},
"rollup": {
  // 嵌入到打包bundle文件中的依赖包
  "bundledDependencies": [],
  // 支持编译类型枚举: 'cjs'|'esm'|'umd'  
  "buildTypes": [
    "cjs", "esm"
  ],
  // import {} from 'inferno' Inferno直接通过全局引入的方式放到了window.Inferno上面则需要配置moduleGlobals.
  "moduleGlobals": {"inferno": "Inferno"},
  // umd模式下的全局命名空间, 注意只有当库有export 的模块才有此概念
  "moduleName": "venus.scripts"
},

• 配置npm-scripts

"scripts": {
  "build": "venus-scripts build --cjs",
  "bootstrap": "venus-scripts bootstrap",
  "test": "venus-scripts test",
  "lint": "tslint -p tsconfig.json --project",
  "circularDeps": "madge --circular src/index.ts"
}

运营相关命令顺序，以及关键点

• 1. 在项目中安装venus-scripts包依赖
• 2. 执行npm run bootstrap
• 3. 执行npm run build 编译当前库项目（注意这里不适合用来编译webpack业务项目)
• npm run build -- --cjs
• npm run build -- --umd
• npm run build -- --esm
• npm run build -- --replace
• npm run build -- --sourcemap
• npm run build -- --rem=false -禁止转换px到rem
• 4. 执行npm run test 测试相关脚本 npm run test -- index.test.ts
• 5. 如果需要利用vscode调试，请修改.vscode文件夹中相关配置

拓展自定义babel-plugin-*

1. create venus.config.js, 比如增加infernojs的编译插件可以类似如下(自行安装相关依赖)

module.exports = {
  rollupAlias: {},
  rollupRemOption: { rootValue: 100, unitPrecision: 5, minPixelValue: 1.1 },
  rollupRpxOption: { rootValue: 1, unitPrecision: 5, minPixelValue: 0 },
  rollupSourcemapPathTransform: (sourcePath, pkgName)=> string,
  rollupCssAssetsCDN: [],
  babel: {
    plugins: [
      ["babel-plugin-inferno", {"imports": true}]
    ]
  }
}

index.js

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/index.cjs.min.js');
} else {
  module.exports = require('./dist/index.cjs.js');
}

module.exports.default = module.exports;

注意事项

1. 默认tsconfig.json 中会配置为allowJs: false 禁用对.js的支持，默认我们都需要用ts，tsx来书写代码如果特殊情况需要请自行打开allowJs:true