详解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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
jquery的live使用注意事项
Feb 18 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
巧用canvas
Jan 21 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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单例模式实现(对象只被创建一次)
2012/12/05 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
php集成开发环境详解
2019/09/24 PHP
php适配器模式简单应用示例
2019/10/23 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
页面使用密码保护代码
2013/04/10 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
2016/12/23 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
对python中的logger模块全面讲解
2018/04/28 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python Scrapy框架原理解析
2021/01/04 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
感恩节活动方案
2014/01/27 职场文书
2014年学生会工作总结
2014/11/07 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
宣传稿格式范文
2015/07/23 职场文书
2015年教师节感言
2015/08/03 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库