详解weex默认webpack.config.js改造


Posted in Javascript onJanuary 08, 2018

本文介绍了weex默认webpack.config.js改造,分享给大家,具体如下:

解决的问题:

由于weex默认的webpack配置,会导致在src文件夹下的每一个.vue在temp文件夹下生成对应的一个.js文件,该js文件有一段这样的代码

contents += 'var App = require(\'' + relativePath + '\')\n';
 contents += 'App.el = \'#root\'\n';
 contents += 'new Vue(App)\n';

会导致多个vue对象挂载同一个id(#root),导致整个页面就只有一个vue对象,无法像写spa项目一样写weex项目,因此在这里对webpack.cofig进行改造(添加一个entry.js入口js文件,和一个最外层的App.vue承载路由渲染)

默认的webpack.config.js文件中,有两个方法

第一个 getEntryFileContent

const getEntryFileContent = (entryPath, vueFilePath) => {
 let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath);
 let contents = '';
 /**
  * The plugin's logic currently only supports the .we version
  * which will be supported later in .vue
  */
 if (hasPluginInstalled) {
  const plugindir = pathTo.resolve('./web/plugin.js');
  contents = 'require(\'' + plugindir + '\') \n';
 }
 if (isWin) {
  relativePath = relativePath.replace(/\\/g, '\\\\');
 }
 contents += 'var App = require(\'' + relativePath + '\')\n';
 contents += 'App.el = \'#root\'\n';
 contents += 'new Vue(App)\n';
 return contents;
 }

第二个 walk

const walk = (dir) => {
 dir = dir || '.';
 const directory = pathTo.join(__dirname, 'src', dir);
 fs.readdirSync(directory).forEach((file) => {
  const fullpath = pathTo.join(directory, file);
  const stat = fs.statSync(fullpath);
  const extname = pathTo.extname(fullpath);
  if (stat.isFile() && extname === '.vue' || extname === '.we') {
  if (!fileType) {
   fileType = extname;
  }
  if (fileType && extname !== fileType) {
   console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
  }
  const name = pathTo.join(dir, pathTo.basename(file, extname));
  if (extname === '.vue') {
   const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
   fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
   entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
  }
  weexEntry[name] = fullpath + '?entry=true';
  } else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
  const subdir = pathTo.join(dir, file);
  walk(subdir);
  }
 });
 }

这两个方法,是遍历src中的.vue文件,然后在temp文件夹中生成一个相对应的JS文件

如果我们采用传统的vue开发,需要一个入口.js文件,我们需要对这个配置进行改造

添加入口文件配置

const entry = {index: pathTo.resolve('src', 'entry.js')};
const weexEntry = {index: pathTo.resolve('src', 'entry.js')};

删除或者更改配置(当然,第三种方法还可以把.vue组件不写在src内)

删除

  1. 删除getEntryFileContent函数
  2. 删除walk函数
  3. 删除walk() walk函数的调用

修改(代码来自github上高仿网易严选项目)

注意看最外层的if判断,添加了额外条件 如果是文件且后缀是.vue且不是App.vue的,则进入判断。否则,判断是不是page文件夹,如果不是,则结束。

function walk(dir) {
 dir = dir || '.';
 const directory = pathTo.join(__dirname, 'src', dir);
 fs.readdirSync(directory)
 .forEach((file) => {
  const fullpath = pathTo.join(directory, file);
  const stat = fs.statSync(fullpath);
  const extname = pathTo.extname(fullpath);
  const basename = pathTo.basename(fullpath);
  console.log("配置",file,fullpath,stat,extname,basename,)
  if (stat.isFile() && extname === '.vue' && basename != 'App.vue' ) {
  if (!fileType) {
   fileType = extname;
  }
  if (fileType && extname !== fileType) {
   console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
  }
  const name = pathTo.join(dir, pathTo.basename(file, extname));
  if (extname === '.vue') {
   const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
   fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
   entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
  }
   weexEntry[name] = fullpath + '?entry=true';
  } else if (stat.isDirectory() && ['build','include','assets','filters','mixins'].indexOf(file) == -1 ) {
  const subdir = pathTo.join(dir, file);
  walk(subdir);
  }
 });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎么清空javascript数组
May 11 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Vue 获取数组键名的方法
Jun 21 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 #Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 #Javascript
Node.js使用Koa搭建 基础项目
Jan 08 #Javascript
JavaScript体验异步更好的解决办法
Jan 08 #Javascript
探索Vue高阶组件的使用
Jan 08 #Javascript
Vue入门之数据绑定(小结)
Jan 08 #Javascript
浅谈Vue数据绑定的原理
Jan 08 #Javascript
You might like
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
js验证上传图片的方法
2015/05/12 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
WebPack基础知识详解
2017/01/16 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Django框架验证码用法实例分析
2019/05/10 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
过滤器的用法
2013/10/08 面试题
2015年全国爱眼日活动小结
2015/02/27 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL