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

基于requirejs的vue2项目 (三)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><strong>这里是打包篇</strong></p> <p>使用的是requirejs的r.js进行打包</p> <p>思路是,通过entrance.js里面的require.config进行项目的初打包</p> <p>因为router.js和store.js里面的引用是动态生成的,所以r.js无法对其进行处理,这里我们用到了<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js来进行文件整合</p> <p>具体看代码</p> <p><a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>2build.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=" var fs = require('fs') var cp = require('child_process') var __config__ = require('./../dist/config') var fromdir = (process.argv.length >= 3<br /> ? process.argv[2]<br /> ? process.argv[2]<br /> : ''<br /> : 'dist')<br /> var todir = (process.argv.length >= 4<br /> ? process.argv[3]<br /> ? process.argv[3]<br /> : ''<br /> : 'pack')<br /> var base = {<br /> appDir: '../' + fromdir,<br /> baseUrl: './',<br /> dir: '../' + todir,<br /> // fileExclusionRegExp: &quot;^*.less$&quot;,<br /> removeCombined: true,<br /> optimize: 'uglify2',<br /> // uglify: { ascii_only: true, beautify: true, preserveComments: false },<br /> // uglify2: { output: { ascii_only: true, beautify: false, comments:<br /> // false } },<br /> optimizeCss: 'standard', // &quot;standard&quot;,<br /> paths: {<br /> 'libs': 'libs',<br /> 'vue': 'libs/vue/vue',<br /> 'vuex': 'libs/vuex/vuex',<br /> 'vue-router': 'libs/vue-router/vue-router',<br /> 'vue-popup': 'libs/vue-popup/index',<br /> 'jquery': 'libs/jquery/jquery',<br /> 'fastclick': 'libs/fastclick/fastclick',<br /> 'wind-dom': 'libs/wind-dom/index',<br /> '__module__': 'common/__module__',<br /> '__component__': 'common/__component__',<br /> '__install__': 'common/__install__',<br /> '__store__factory__': 'common/__store__factory__',<br /> 'detector': 'common/detector',<br /> 'calc': 'common/calculate',<br /> 'emitter': 'common/mixins/emitter',<br /> 'clickoutside': 'common/utils/clickoutside',<br /> 'isvisible': 'common/utils/isvisible',<br /> 'install': 'components/install'<br /> },<br /> map: {<br /> '*': {<br /> 'text': 'libs/require-text/text'<br /> }<br /> },<br /> modules: [<br /> {<br /> name: 'entrance',<br /> include: [<br /> '__module__',<br /> '__store__factory__',<br /> 'libs/es6-promise/promise',<br /> 'jquery',<br /> 'vue',<br /> 'vue-router',<br /> 'detector',<br /> 'calc',<br /> 'fastclick',<br /> 'libs/require-text/text',<br /> 'store/transition'<br /> ],<br /> exclude: ['store/index', 'router/index']<br /> }<br /> ]<br /> }</p> <p>// 这里是通过配置文件来组装配置信息对设置了同步的模板进行打包<br /> base.modules[0].include = base<br /> .modules[0]<br /> .include<br /> .concat(__config__.modules.filter(o => o.store).map(o => {<br /> return 'store/modules/' + o.path + '/store'<br /> }))<br /> base.modules[0].include = base<br /> .modules[0]<br /> .include<br /> .concat(__config__.modules.filter(o => o.sync).map(o => {<br /> return 'business/' + o.path + '/index'<br /> }))</p> <p>base.modules[0].include = base<br /> .modules[0]<br /> .include<br /> .concat(__config__.modules.filter(o => o.sync).map(o => {<br /> return 'libs/require-text/text!business/' + o.path + '/tpl.html'<br /> }))</p> <p>fs.writeFileSync('build/b.js', '(' + JSON.stringify(base) + ')')</p> <p>var spawn = cp.spawn<br /> var exec = cp.exec</p> <p>//这里是通过控件台执行r.js的打包命令<br /> node2build = spawn('node', ['node_modules/requirejs/bin/r.js', '-o', 'build/b.js'])</p> <p>node2build<br /> .stdout<br /> .on('data', function (data) {<br /> console.log('' + data)<br /> })<br /> node2build<br /> .stderr<br /> .on('data', function (data) {<br /> console.log('' + data)<br /> })</p> <p>//这里是控制台执行完成后进行的文件合并处理<br /> node2build.on('exit', function (code, signal) {<br /> fs.unlinkSync('build/b.js')<br /> // 合并代码<br /> var entrance = fs.readFileSync(todir + '/entrance.js', 'utf-8')</p> <p> var router = fs.readFileSync(todir + '/router/index.js', 'utf-8')<br /> router = router.replace(/(define()(e,function)/, '$1&quot;router/index&quot;,$2')</p> <p> var store = fs.readFileSync(todir + '/store/index.js', 'utf-8')<br /> store = store.replace(/(define()(e,function)/, '$1&quot;store/index&quot;,$2')</p> <p> //合并router和store<br /> entrance = entrance.replace(/(define([&quot;']application[&quot;'])/, router + store + '$1')</p> <p> //将配置文件放在文件头处<br /> var config = fs.readFileSync(todir + '/config.js', 'utf-8')<br /> entrance = config + entrance</p> <p> //删除多说的文件<br /> exec('rm -rf ' + todir + '/store')<br /> exec('rm -rf ' + todir + '/router')<br /> exec('rm -rf ' + todir + '/components')<br /> exec('rm ' + todir + '/build.txt')<br /> exec('rm ' + todir + '/config.js')<br /> fs.writeFileSync(todir + '/entrance.js', entrance)</p> <p> // 处理html删除config.js的引入<br /> var html = fs.readFileSync(todir + '/index.html', 'utf-8')<br /> html = html.replace('rn<script src=&quot;config.js&quot;></script>', '')<br /> fs.writeFileSync(todir + '/index.html', html)<br /> console.log(`打包完成 (返回码 : ${code})`)<br /> })</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"> <span class="hljs-keyword">var</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>) <span class="hljs-keyword">var</span> cp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'child_process'</span>) <span class="hljs-keyword">var</span> __config__ = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./../dist/config'</span>) <span class="hljs-keyword">var</span> fromdir = (process.argv.length &gt;= <span class="hljs-number">3</span> ? process.argv[<span class="hljs-number">2</span>] ? process.argv[<span class="hljs-number">2</span>] : <span class="hljs-string">''</span> : <span class="hljs-string">'dist'</span>) <span class="hljs-keyword">var</span> todir = (process.argv.length &gt;= <span class="hljs-number">4</span> ? process.argv[<span class="hljs-number">3</span>] ? process.argv[<span class="hljs-number">3</span>] : <span class="hljs-string">''</span> : <span class="hljs-string">'pack'</span>) <span class="hljs-keyword">var</span> base = { <span class="hljs-attr">appDir</span>: <span class="hljs-string">'../'</span> + fromdir, <span class="hljs-attr">baseUrl</span>: <span class="hljs-string">'./'</span>, <span class="hljs-attr">dir</span>: <span class="hljs-string">'../'</span> + todir, <span class="hljs-comment">// fileExclusionRegExp: "^*.less$",</span> removeCombined: <span class="hljs-literal">true</span>, <span class="hljs-attr">optimize</span>: <span class="hljs-string">'uglify2'</span>, <span class="hljs-comment">// uglify: { ascii_only: true, beautify: true, preserveComments: false },</span> <span class="hljs-comment">// uglify2: { output: { ascii_only: true, beautify: false, comments:</span> <span class="hljs-comment">// false } },</span> optimizeCss: <span class="hljs-string">'standard'</span>, <span class="hljs-comment">// "standard",</span> paths: { <span class="hljs-string">'libs'</span>: <span class="hljs-string">'libs'</span>, <span class="hljs-string">'vue'</span>: <span class="hljs-string">'libs/vue/vue'</span>, <span class="hljs-string">'vuex'</span>: <span class="hljs-string">'libs/vuex/vuex'</span>, <span class="hljs-string">'vue-router'</span>: <span class="hljs-string">'libs/vue-router/vue-router'</span>, <span class="hljs-string">'vue-popup'</span>: <span class="hljs-string">'libs/vue-popup/index'</span>, <span class="hljs-string">'jquery'</span>: <span class="hljs-string">'libs/jquery/jquery'</span>, <span class="hljs-string">'fastclick'</span>: <span class="hljs-string">'libs/fastclick/fastclick'</span>, <span class="hljs-string">'wind-dom'</span>: <span class="hljs-string">'libs/wind-dom/index'</span>, <span class="hljs-string">'__module__'</span>: <span class="hljs-string">'common/__module__'</span>, <span class="hljs-string">'__component__'</span>: <span class="hljs-string">'common/__component__'</span>, <span class="hljs-string">'__install__'</span>: <span class="hljs-string">'common/__install__'</span>, <span class="hljs-string">'__store__factory__'</span>: <span class="hljs-string">'common/__store__factory__'</span>, <span class="hljs-string">'detector'</span>: <span class="hljs-string">'common/detector'</span>, <span class="hljs-string">'calc'</span>: <span class="hljs-string">'common/calculate'</span>, <span class="hljs-string">'emitter'</span>: <span class="hljs-string">'common/mixins/emitter'</span>, <span class="hljs-string">'clickoutside'</span>: <span class="hljs-string">'common/utils/clickoutside'</span>, <span class="hljs-string">'isvisible'</span>: <span class="hljs-string">'common/utils/isvisible'</span>, <span class="hljs-string">'install'</span>: <span class="hljs-string">'components/install'</span> }, <span class="hljs-attr">map</span>: { <span class="hljs-string">'*'</span>: { <span class="hljs-string">'text'</span>: <span class="hljs-string">'libs/require-text/text'</span> } }, <span class="hljs-attr">modules</span>: [ { <span class="hljs-attr">name</span>: <span class="hljs-string">'entrance'</span>, <span class="hljs-attr">include</span>: [ <span class="hljs-string">'__module__'</span>, <span class="hljs-string">'__store__factory__'</span>, <span class="hljs-string">'libs/<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>-promise/promise'</span>, <span class="hljs-string">'jquery'</span>, <span class="hljs-string">'vue'</span>, <span class="hljs-string">'vue-router'</span>, <span class="hljs-string">'detector'</span>, <span class="hljs-string">'calc'</span>, <span class="hljs-string">'fastclick'</span>, <span class="hljs-string">'libs/require-text/text'</span>, <span class="hljs-string">'store/transition'</span> ], <span class="hljs-attr">exclude</span>: [<span class="hljs-string">'store/index'</span>, <span class="hljs-string">'router/index'</span>] } ] } <span class="hljs-comment">// 这里是通过配置文件来组装配置信息对设置了同步的模板进行打包</span> base.modules[<span class="hljs-number">0</span>].include = base .modules[<span class="hljs-number">0</span>] .include .concat(__config__.modules.filter(<span class="hljs-function"><span class="hljs-params">o</span> =&gt;</span> o.store).map(<span class="hljs-function"><span class="hljs-params">o</span> =&gt;</span> { <span class="hljs-keyword">return</span> <span class="hljs-string">'store/modules/'</span> + o.path + <span class="hljs-string">'/store'</span> })) base.modules[<span class="hljs-number">0</span>].include = base .modules[<span class="hljs-number">0</span>] .include .concat(__config__.modules.filter(<span class="hljs-function"><span class="hljs-params">o</span> =&gt;</span> o.sync).map(<span class="hljs-function"><span class="hljs-params">o</span> =&gt;</span> { <span class="hljs-keyword">return</span> <span class="hljs-string">'business/'</span> + o.path + <span class="hljs-string">'/index'</span> })) base.modules[<span class="hljs-number">0</span>].include = base .modules[<span class="hljs-number">0</span>] .include .concat(__config__.modules.filter(<span class="hljs-function"><span class="hljs-params">o</span> =&gt;</span> o.sync).map(<span class="hljs-function"><span class="hljs-params">o</span> =&gt;</span> { <span class="hljs-keyword">return</span> <span class="hljs-string">'libs/require-text/text!business/'</span> + o.path + <span class="hljs-string">'/tpl.html'</span> })) fs.writeFileSync(<span class="hljs-string">'build/b.js'</span>, <span class="hljs-string">'('</span> + <span class="hljs-built_in">JSON</span>.stringify(base) + <span class="hljs-string">')'</span>) <span class="hljs-keyword">var</span> spawn = cp.spawn <span class="hljs-keyword">var</span> exec = cp.exec <span class="hljs-comment">//这里是通过控件台执行r.js的打包命令</span> node2build = spawn(<span class="hljs-string">'node'</span>, [<span class="hljs-string">'node_modules/requirejs/bin/r.js'</span>, <span class="hljs-string">'-o'</span>, <span class="hljs-string">'build/b.js'</span>]) node2build .stdout .on(<span class="hljs-string">'data'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">''</span> + data) }) node2build .stderr .on(<span class="hljs-string">'data'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">''</span> + data) }) <span class="hljs-comment">//这里是控制台执行完成后进行的文件合并处理</span> node2build.on(<span class="hljs-string">'exit'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">code, signal</span>) </span>{ fs.unlinkSync(<span class="hljs-string">'build/b.js'</span>) <span class="hljs-comment">// 合并代码</span> <span class="hljs-keyword">var</span> entrance = fs.readFileSync(todir + <span class="hljs-string">'/entrance.js'</span>, <span class="hljs-string">'utf-8'</span>) <span class="hljs-keyword">var</span> router = fs.readFileSync(todir + <span class="hljs-string">'/router/index.js'</span>, <span class="hljs-string">'utf-8'</span>) router = router.replace(<span class="hljs-regexp">/(define()(e,function)/</span>, <span class="hljs-string">'$1"router/index",$2'</span>) <span class="hljs-keyword">var</span> store = fs.readFileSync(todir + <span class="hljs-string">'/store/index.js'</span>, <span class="hljs-string">'utf-8'</span>) store = store.replace(<span class="hljs-regexp">/(define()(e,function)/</span>, <span class="hljs-string">'$1"store/index",$2'</span>) <span class="hljs-comment">//合并router和store</span> entrance = entrance.replace(<span class="hljs-regexp">/(define(["']application["'])/</span>, router + store + <span class="hljs-string">'$1'</span>) <span class="hljs-comment">//将配置文件放在文件头处</span> <span class="hljs-keyword">var</span> config = fs.readFileSync(todir + <span class="hljs-string">'/config.js'</span>, <span class="hljs-string">'utf-8'</span>) entrance = config + entrance <span class="hljs-comment">//删除多说的文件</span> exec(<span class="hljs-string">'rm -rf '</span> + todir + <span class="hljs-string">'/store'</span>) exec(<span class="hljs-string">'rm -rf '</span> + todir + <span class="hljs-string">'/router'</span>) exec(<span class="hljs-string">'rm -rf '</span> + todir + <span class="hljs-string">'/components'</span>) exec(<span class="hljs-string">'rm '</span> + todir + <span class="hljs-string">'/build.txt'</span>) exec(<span class="hljs-string">'rm '</span> + todir + <span class="hljs-string">'/config.js'</span>) fs.writeFileSync(todir + <span class="hljs-string">'/entrance.js'</span>, entrance) <span class="hljs-comment">// 处理html删除config.js的引入</span> <span class="hljs-keyword">var</span> html = fs.readFileSync(todir + <span class="hljs-string">'/index.html'</span>, <span class="hljs-string">'utf-8'</span>) html = html.replace(<span class="hljs-string">'rn&lt;script src="config.js"&gt;&lt;/script&gt;'</span>, <span class="hljs-string">''</span>) fs.writeFileSync(todir + <span class="hljs-string">'/index.html'</span>, html) <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`打包完成 (返回码 : <span class="hljs-subst">${code}</span>)`</span>) }) </code></pre> <p><strong>如果有什么问题可以留言质询,觉得有用就收藏吧</strong></p> <p></code></p>

总结

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

基于requirejs的vue2项目 (三)

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

基于requirejs的vue2项目 (三)

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

80%的人都看过