Vueバージョン2.6.11。
まず、ライブラリのソースコードをpackage.jsonから解析する必要があります。
scriptツールフロー解析: build
"build": "node scripts/build.js",
vueのソースコードのpackage.jsonにあるbuildコマンドを実際に実行すると、script/build.jsを実行したのと同じことになることがわかります。
スクリプト/ビルドを検索.js
build.jsは多くの関連モジュールを導入していることがわかります。
// 这里的builds 就是通过getAllBuilds()方法得到
// ビルドコマンドを実行する際にパッケージ化する必要があるvueのすべてのバージョン
let builds = require('./config').getAllBuilds()
getAllBuilds() 正確には何ですか？
// configメソッドは一番下にエクスポートされている。
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
ビルドとgenConfigの検索
最初のビルドは、次のようなオブジェクトとしてコードで見ることができます。
const builds = {
// Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
// buildsbuildメソッドの各オブジェクトは、パッケージ化する必要があるvueの異なるバージョンを表している。
'web-runtime-cjs-dev': {
// resolveメソッドはconfigで定義されている。
// 興味のある方は、エイリアスを介して対応するパスを取得するだけでよい。
// entryはパッケージ化するエントリーファイルのパスを示す。
entry: resolve('web/entry-runtime.js'),
// destビルドパッケージの出口へのパス
dest: resolve('dist/vue.runtime.common.dev.js'),
// formatはモジュールを表す。，CMD，ESModules
format: 'cjs',
//
env: 'development',
// banner実は、これはパッケージング・コード用に生成されたコメントなのだ。~~~~
banner
},
'web-runtime-cjs-prod': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.common.prod.js'),
format: 'cjs',
env: 'production',
banner
},
// Runtime+compiler CommonJS build (CommonJS)
'web-full-cjs-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'),
dest: resolve('dist/vue.common.dev.js'),
format: 'cjs',
env: 'development',
alias: { he: './entity-decoder' },
banner
},
... ]
genConfig()
...
const config = {
input: opts.entry,
external: opts.external,
plugins: [
flow(),
alias(Object.assign({}, aliases, opts.alias))
].concat(opts.plugins || []),
output: {
file: opts.dest,
format: opts.format,
banner: opts.banner,
name: opts.moduleName || 'Vue'
},
onwarn: (msg, warn) => {
if (!/Circular/.test(msg)) {
warn(msg)
}
}
}
...return config
genConfig関数については、実際にbuildsオブジェクトの内容をroolupパッケージングツールが認識できる形式に変換して返していることがわかります。
フィルタリング コードをよく読むと、ビルドメソッドを実行すると、process.argv[2]に従ってビルドをフィルタリングするロジックのレイヤーが実行されることがわかります。
if (process.argv[2]) {
const filters = process.argv[2].split(',')
builds = builds.filter(b => {
return filters.some(f => {
console.log(b.output,'b.output');
console.log(b._name,'_name');
console.log(b,'b');
// 対応する引数にマッチするretrunを見つけるためにフィルタリングする。
return b.output.file.indexOf(f) > -1 || b._name.indexOf(f) > -1
})
})
} else {
// filter out weex builds by default
builds = builds.filter(b => {
return b.output.file.indexOf('weex') === -1
})
}
最後に、ビルドメソッドを呼び出してロジックをパッケージ化します。
皆さんのおかげです！
1.この記事を気に入っていただけたなら、賛辞を送ってください。
