Vue源码思考（二、门口观察，打包逻辑 上）
上节，我们大概看了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/