Vue源码思考（二门口观察，打包逻辑 上）

Posted 2021-04-16 未来大前端

上节，我们大概看了vue源码package.json文件的第一层属性的作用。本节详细看下该文件内的可执行脚本命令，进而深入分析下vue源码的打包逻辑。

1、都有哪儿些命令？

这是从package.json内复制来的全部命令

 "scripts": { "dev": " rollup -w -c scripts/config.js --environment TARGET:web-full-dev", "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev", "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm", "dev:test": "karma start test/unit/karma.dev.config.js", "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer", "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ", "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework", "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory", "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ", "build": "node scripts/build.js", "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer", "build:weex": "npm run build -- weex", "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex", "test:unit": "karma start test/unit/karma.unit.config.js", "test:cover": "karma start test/unit/karma.cover.config.js", "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js", "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js", "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js", "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2", "test:types": "tsc -p ./types/test/tsconfig.json", "lint": "eslint src scripts test", "flow": "flow check", "sauce": "karma start test/unit/karma.sauce.config.js", "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js", "release": "bash scripts/release.sh", "release:weex": "bash scripts/release-weex.sh", "release:note": "node scripts/gen-release-note.js", "commit": "git-cz" }

其中带rollup的这些，是使用rollup命令行接口打包的，-w, --watch 观察要打包文件的变动，并且在有变动时重新打包；--environment <values>   传给配置文件的设置；-c, --config 使用这个配置文件 。这些是为了打包出单个功能的模块。如下

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev", "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm", "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer", "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ", "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework", "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory", "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",

带build的这些是通过rollup的代码脚本接口打包的，分浏览器、服务端、weex三种环境下的批量构建。如下

 "build": "node scripts/build.js", "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer", "build:weex": "npm run build -- weex",

带test的不少，都是进行各个模块组的单元测试和单元测试统计覆盖率

 "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex", "test:unit": "karma start test/unit/karma.unit.config.js", "test:cover": "karma start test/unit/karma.cover.config.js", "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js", "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js",    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js", "test:types": "tsc -p ./types/test/tsconfig.json"

使用SauceLabs 这个云测试工具进行跨平台的 javascript 单元测试，因为个人本地浏览器种类不够啊。

 "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2", "sauce": "karma start test/unit/karma.sauce.config.js",

代码风格检查

 "lint": "eslint src scripts test",

静态类型检查

"flow": "flow check",

执行render性能测试demo，查看结果

"bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",

顺路执行看下：

批量bash命令，自动执行完整的打包、测试、发布流程。

"release": "bash scripts/release.sh","release:weex": "bash scripts/release-weex.sh",

生成发布更新日志

"release:note": "node scripts/gen-release-note.js",

使用提交注释模板和询问流程提交当前新增加的文件，依靠cz-conventional-changelog插件，会执行gitHooks

"commit": "git-cz"

2、rollup是什么？

1、Rollup是一款es6模块代码的打包构建工具(支持css和js打包)。

2、它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率。

3、Rollup只会在ES6模块中支持tree-shaking特性，tree-shaking就是说当我们引用一个库的时候，我们只用到一个库的某一段的代码的时候，它不会把所有的代码打包进来。

4、Rollup更适合打包js库，但是对于打包一个项目的整个应用的话，webpack更适合。

5、中文网：https://www.rollupjs.com/