脚本宝典收集整理的这篇文章主要介绍了

vue-cli系列之vue-cli自身引用了哪些包?持续更新中……

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">概述</h1> <p>当vue-cli创建了一个vue-demo后,我们使用npm run serve就可以启动项目了。通过package.json中的serve命令我们可以看到,实际是启动了<code>vue-cli-service serve</code>这个命令。这个命令实际上是启动了一段<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>脚本,那这个脚本引用了哪些包呢?让我们来一探究竟。</p> <h2 id="articleHeader1">semver</h2> <p>概述:这个包是用来做版本号规范处理的,可以校验一个输入的版本号是否符合规范,以及某个包是否满足某个版本。</p> <p>实例:检测本机<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>版本是否符合vue-cli需求的node版本。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="if (!semver.satisfies(process.version, requiredVersion)) { error( `You are using Node ${process.version}, but vue-cli-service ` + `requires Node ${requiredVersion}.nPlease upgrade your Node version.` ) process.exit(1) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">if</span> (!semver.satisfies(process.version, requiredVersion)) { error( <span class="hljs-string">`You are using Node <span class="hljs-subst">${process.version}</span>, but vue-cli-service `</span> + <span class="hljs-string">`requires Node <span class="hljs-subst">${requiredVersion}</span>.nPlease upgrade your Node version.`</span> ) process.exit(<span class="hljs-number">1</span>) }</code></pre> <p>npm 链接:<a href="https://www.npmjs.com/package/semver" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/package...</a></p> <h2 id="articleHeader2">minimist</h2> <p>概述:这个包是用来处理命令行的参数输入的。</p> <p>实例:检测命令行参数中是否有如下几个参数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const args = require('minimist')(rawArgv, { boolean: [ // build 'modern', 'report', 'report-json', 'watch', // serve 'open', 'copy', 'https', // inspect 'verbose' ] })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> args = <span class="hljs-built_in">require</span>(<span class="hljs-string">'minimist'</span>)(rawArgv, { <span class="hljs-attr">boolean</span>: [ <span class="hljs-comment">// build</span> <span class="hljs-string">'modern'</span>, <span class="hljs-string">'report'</span>, <span class="hljs-string">'report-json'</span>, <span class="hljs-string">'watch'</span>, <span class="hljs-comment">// serve</span> <span class="hljs-string">'open'</span>, <span class="hljs-string">'copy'</span>, <span class="hljs-string">'https'</span>, <span class="hljs-comment">// inspect</span> <span class="hljs-string">'verbose'</span> ] })</code></pre> <p>npm链接:<a href="https://www.npmjs.com/package/minimist" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/package...</a></p> <h2 id="articleHeader3">debug</h2> <p>概述: 一个轻量级的调试工具,根据参数返回一个打印错误的函数。看起来是可以让不同的错误输出更清晰,颜色很美。<br />实例: 为不同的错误创建不同的错误输出函数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const logger = debug('vue:env'); //调用该函数会输出以vue:env开头的字符串。 //...此处省略好多业务代码 debug('vue:project-config')(this.projectOptions) // 输出vue:project-config开头的字符串。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">const</span> logger = debug(<span class="hljs-string">'vue:env'</span>); <span class="hljs-comment">//调用该函数会输出以vue:env开头的字符串。</span> <span class="hljs-comment">//...此处省略好多业务代码</span> debug(<span class="hljs-string">'vue:project-config'</span>)(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.projectOptions) <span class="hljs-comment">// 输出vue:project-config开头的字符串。</span></code></pre> <p>npm链接:<a href="https://www.npmjs.com/package/debug" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/package...</a></p> <h2 id="articleHeader4">chalk</h2> <p>概述:可以以不同的样式输出字符串到终端<br />实例:打印不一段字符串,其中关键字加粗</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="if (fileConfig) { if (pkgConfig) { warn( `&quot;vue&quot; field in package.json ignored ` + `due to presence of ${chalk.bold('vue.config.js')}.` ) warn( `You should migrate it into ${chalk.bold('vue.config.js')} ` + `and remove it from package.json.` ) } resolved = fileConfig resolvedFrom = 'vue.config.js' }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">if</span> (fileConfig) { <span class="hljs-keyword">if</span> (pkgConfig) { warn( <span class="hljs-string">`"vue" field in package.json ignored `</span> + <span class="hljs-string">`due to presence of <span class="hljs-subst">${chalk.bold(<span class="hljs-string">'vue.config.js'</span>)}</span>.`</span> ) warn( <span class="hljs-string">`You should migrate it into <span class="hljs-subst">${chalk.bold(<span class="hljs-string">'vue.config.js'</span>)}</span> `</span> + <span class="hljs-string">`and remove it from package.json.`</span> ) } resolved = fileConfig resolvedFrom = <span class="hljs-string">'vue.config.js'</span> }</code></pre> <p>npm链接:<a href="https://www.npmjs.com/package/chalk" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/package...</a></p> <h2 id="articleHeader5">joi</h2> <p>概述:一个js类型&amp;字段验证的库。类似schemas的概念。<br />实例:vue-cli中为了确保配置对象的正确性,定义了一个蓝本,去校验配置的正确性(主要是校验用户配置,例如vue.config.js中的输入)</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const schema = createSchema(joi => joi.object({<br /> baseUrl: joi.string().allow(''),<br /> publicPath: joi.string().allow(''),<br /> outputDir: joi.string(),<br /> assetsDir: joi.string().allow(''),<br /> indexPath: joi.string(),<br /> filenameHashing: joi.boolean(),<br /> runtimeCompiler: joi.boolean(),<br /> transpileDependencies: joi.array(),<br /> productionSourceMap: joi.boolean(),<br /> parallel: joi.boolean(),<br /> devServer: joi.object(),<br /> pages: joi.object().pattern(<br /> /w+/,<br /> joi.alternatives().try([<br /> joi.string(),<br /> joi.object().keys({<br /> entry: joi.string().required()<br /> }).unknown(true)<br /> ])<br /> ),<br /> crossorigin: joi.string().valid(['', 'anonymous', 'use-credentials']),<br /> integrity: joi.boolean(),</p> <p> // css<br /> css: joi.object({<br /> modules: joi.boolean(),<br /> extract: joi.alternatives().try(joi.boolean(), joi.object()),<br /> sourceMap: joi.boolean(),<br /> loaderOptions: joi.object({<br /> css: joi.object(),<br /> sass: joi.object(),<br /> less: joi.object(),<br /> stylus: joi.object(),<br /> postcss: joi.object()<br /> })<br /> }),</p> <p> // webpack<br /> chainWebpack: joi.func(),<br /> configureWebpack: joi.alternatives().try(<br /> joi.object(),<br /> joi.func()<br /> ),</p> <p> // known runtime options for built-in plugins<br /> lintOnSave: joi.any().valid([true, false, 'error']),<br /> pwa: joi.object(),</p> <p> // 3rd party plugin options<br /> pluginOptions: joi.object()<br /> }))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">const</span> schema = createSchema(<span class="hljs-function"><span class="hljs-params">joi</span> =&gt;</span> joi.object({ <span class="hljs-attr">baseUrl</span>: joi.string().allow(<span class="hljs-string">''</span>), <span class="hljs-attr">publicPath</span>: joi.string().allow(<span class="hljs-string">''</span>), <span class="hljs-attr">outputDir</span>: joi.string(), <span class="hljs-attr">assetsDir</span>: joi.string().allow(<span class="hljs-string">''</span>), <span class="hljs-attr">indexPath</span>: joi.string(), <span class="hljs-attr">filenameHashing</span>: joi.boolean(), <span class="hljs-attr">runtimeCompiler</span>: joi.boolean(), <span class="hljs-attr">transpileDependencies</span>: joi.array(), <span class="hljs-attr">productionSource<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a></span>: joi.boolean(), <span class="hljs-attr">parallel</span>: joi.boolean(), <span class="hljs-attr">devServer</span>: joi.object(), <span class="hljs-attr">pages</span>: joi.object().pattern( <span class="hljs-regexp">/w+/</span>, joi.alternatives().try([ joi.string(), joi.object().keys({ <span class="hljs-attr">entry</span>: joi.string().required() }).unknown(<span class="hljs-literal">true</span>) ]) ), <span class="hljs-attr">crossorigin</span>: joi.string().valid([<span class="hljs-string">''</span>, <span class="hljs-string">'anonymous'</span>, <span class="hljs-string">'use-credentials'</span>]), <span class="hljs-attr">integrity</span>: joi.boolean(), <span class="hljs-comment">// css</span> css: joi.object({ <span class="hljs-attr">modules</span>: joi.boolean(), <span class="hljs-attr">extract</span>: joi.alternatives().try(joi.boolean(), joi.object()), <span class="hljs-attr">sourceMap</span>: joi.boolean(), <span class="hljs-attr">loaderOptions</span>: joi.object({ <span class="hljs-attr">css</span>: joi.object(), <span class="hljs-attr">sass</span>: joi.object(), <span class="hljs-attr">less</span>: joi.object(), <span class="hljs-attr">stylus</span>: joi.object(), <span class="hljs-attr">postcss</span>: joi.object() }) }), <span class="hljs-comment">// webpack</span> chainWebpack: joi.func(), <span class="hljs-attr">configureWebpack</span>: joi.alternatives().try( joi.object(), joi.func() ), <span class="hljs-comment">// known runtime options for built-in plugins</span> lintOnSave: joi.any().valid([<span class="hljs-literal">true</span>, <span class="hljs-literal">false</span>, <span class="hljs-string">'error'</span>]), <span class="hljs-attr">pwa</span>: joi.object(), <span class="hljs-comment">// 3rd party plugin options</span> pluginOptions: joi.object() }))</code></pre> <p>npm链接:<a href="https://www.npmjs.com/package/joi" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/package...</a></p> <h2 id="articleHeader6">lodash.defaultsDeep</h2> <p>概述:lodash这个包提供的一个函数,有点类似Object.assign()这个函数,可以用来<a href="http://www.js-code.com/tag/%e9%bb%98%e8%ae%a4%e5%8f%82%e6%95%b0" title="默认参数" target="_blank">默认参数</a>填充。<br />实例:vue中,合并用户配置(vue.config.js)与默认配置。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// lodash官方案例: _.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } }); // => { 'a': { 'b': 2, 'c': 3 } }<br /> // vue-cli中的应用<br /> this.projectOptions = defaultsDeep(userOptions, defaults());<br /> // 这里贴上vue-cli的默认配置<br /> exports.defaults = () => ({<br /> // project deployment base<br /> publicPath: '/',</p> <p> // where to output built files<br /> outputDir: 'dist',</p> <p> // where to put static assets (js/css/img/font/...)<br /> assetsDir: '',</p> <p> // filename for index.html (relative to outputDir)<br /> indexPath: 'index.html',</p> <p> // whether filename will contain hash part<br /> filenameHashing: true,</p> <p> // boolean, use full build?<br /> runtimeCompiler: false,</p> <p> // deps to transpile<br /> transpileDependencies: [/* string or regex */],</p> <p> // source<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a> for production build?<br /> productionSource<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>: !process.env.VUE_CLI_TEST,</p> <p> // use thread-loader for <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a> &amp; TS in production build<br /> // enabled by default if the machine has more than 1 cores<br /> parallel: hasMultipleCores(),</p> <p> // multi-page config<br /> pages: undefined,</p> <p> // <script type=&quot;module&quot; crossorigin=&quot;use-credentials&quot;><br /> // #1656, #1867, #2025<br /> crossorigin: undefined,</p> <p> // subresource integrity<br /> integrity: false,</p> <p> css: {<br /> // extract: true,<br /> // modules: false,<br /> // localIdentName: '[name]_[local]_[hash:base64:5]',<br /> // sourceMap: false,<br /> // loaderOptions: {}<br /> },</p> <p> // whether to use eslint-loader<br /> lintOnSave: true,</p> <p> devServer: {<br /> /*<br /> open: process.platform === 'darwin',<br /> host: '0.0.0.0',<br /> port: 8080,<br /> https: false,<br /> hotOnly: false,<br /> proxy: null, // string | Object<br /> before: app => {}<br /> */<br /> }<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// lodash官方案例:</span> _.defaultsDeep({ <span class="hljs-string">'a'</span>: { <span class="hljs-string">'b'</span>: <span class="hljs-number">2</span> } }, { <span class="hljs-string">'a'</span>: { <span class="hljs-string">'b'</span>: <span class="hljs-number">1</span>, <span class="hljs-string">'c'</span>: <span class="hljs-number">3</span> } }); <span class="hljs-comment">// =&gt; { 'a': { 'b': 2, 'c': 3 } }</span> <span class="hljs-comment">// vue-cli中的应用</span> <span class="hljs-keyword">this</span>.projectOptions = defaultsDeep(userOptions, defaults()); <span class="hljs-comment">// 这里贴上vue-cli的默认配置</span> <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s.defaults = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> ({ <span class="hljs-comment">// project deployment base</span> publicPath: <span class="hljs-string">'/'</span>, <span class="hljs-comment">// where to output built files</span> outputDir: <span class="hljs-string">'dist'</span>, <span class="hljs-comment">// where to put static assets (js/css/img/font/...)</span> assetsDir: <span class="hljs-string">''</span>, <span class="hljs-comment">// filename for index.html (relative to outputDir)</span> indexPath: <span class="hljs-string">'index.html'</span>, <span class="hljs-comment">// whether filename will contain hash part</span> filenameHashing: <span class="hljs-literal">true</span>, <span class="hljs-comment">// boolean, use full build?</span> runtimeCompiler: <span class="hljs-literal">false</span>, <span class="hljs-comment">// deps to transpile</span> transpileDependencies: [<span class="hljs-comment">/* string or regex */</span>], <span class="hljs-comment">// sourceMap for production build?</span> productionSourceMap: !process.env.VUE_CLI_TEST, <span class="hljs-comment">// use thread-loader for <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a> &amp; TS in production build</span> <span class="hljs-comment">// enabled by default if the machine has more than 1 cores</span> parallel: hasMultipleCores(), <span class="hljs-comment">// multi-page config</span> pages: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// &lt;script type="module" crossorigin="use-credentials"&gt;</span> <span class="hljs-comment">// #1656, #1867, #2025</span> crossorigin: <span class="hljs-literal">undefined</span>, <span class="hljs-comment">// subresource integrity</span> integrity: <span class="hljs-literal">false</span>, <span class="hljs-attr">css</span>: { <span class="hljs-comment">// extract: true,</span> <span class="hljs-comment">// modules: false,</span> <span class="hljs-comment">// localIdentName: '[name]_[local]_[hash:base64:5]',</span> <span class="hljs-comment">// sourceMap: false,</span> <span class="hljs-comment">// loaderOptions: {}</span> }, <span class="hljs-comment">// whether to use eslint-loader</span> lintOnSave: <span class="hljs-literal">true</span>, <span class="hljs-attr">devServer</span>: { <span class="hljs-comment">/* open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // string | Object before: app =&gt; {} */</span> } }) </code></pre> <h2 id="articleHeader7">portfinder</h2> <p>概述:用来查询一个给定范围内的,一个可用的端口号。<br />实例:查询一个可用的端口号。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 设置检查范围的起始端口号。 portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port //port是一个promise,.then中可以得到具体的端口 const port = await portfinder.getPortPromise(); //使用port const urls = prepareURLs( protocol, host, port, isAbsoluteUrl(options.baseUrl) ? '/' : options.baseUrl )" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 设置检查范围的起始端口号。</span> portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port <span class="hljs-comment">//port是一个promise,.then中可以得到具体的端口</span> <span class="hljs-keyword">const</span> port = <span class="hljs-keyword">await</span> portfinder.getPort<a href="http://www.js-code.com/tag/promise" title="浏览关于“Promise”的文章" target="_blank" class="tag_link">Promise</a>(); <span class="hljs-comment">//使用port</span> <span class="hljs-keyword">const</span> urls = prepareURLs( protocol, host, port, isAbsoluteUrl(options.baseUrl) ? <span class="hljs-string">'/'</span> : options.baseUrl )</code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue-cli系列之vue-cli自身引用了哪些包?持续更新中……

全部内容,希望文章能够帮你解决

vue-cli系列之vue-cli自身引用了哪些包?持续更新中……

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过