f-loat / mpvue-entry Goto Github PK

这个涉及到模块热更新的问题，近期会解决

增加配置vuex-loading插件呢？
https://github.com/f/vuex-loading

引入weui的时候报路径错误，想问一下正确的引入方式

0.3.X 的报错

目前只能主入口文件作为模板，不知道能否提供一个区分的属性，加在getEntry中，因为app.vue的main.js和pages中的略有不同

每个页面的config应该呆在page才适合，里面的配置和page息息相关。如果放在pages.js里，很容易会忘记掉，尤其是如果有使用usingComponents的时候

项目有很多的路由，不想把全部路由写在同一个pages.js，想在其他目录分了模块js，再在pages.js引入这些模块js，最后组装成全部路由列表，但是尝试过后报以下错误，pages.js是不是不支持这样的引入方式？

pages1.js代码：
import routes from './router/routes';
module.exports = routes;

router目录：

src/mixin/index.js

export default {
  onLoad() {
    console.warn('检查是否已经绑定了手机号码')
  }
}

src/main.js

import Vue from 'vue'
import App from '@/App'
import mixin from '@/mixin'

Vue.config.productionTip = false
App.mpType = 'app'

Vue.mixin(mixin) <----- 这里

const app = new Vue(App)
app.$mount()

...

执行结果如图，console.warn('检查是否已经绑定了手机号码')被执行了多次


原因：由于mpvue-entry这个插件的原理是以src/main.js为模板，因此每个入口文件都会复制Vue.mixin(mixin)，导致了Vue.mixin(mixin)语句执行了多次。

建议是不以 main.js 为模板，而是直接定义模板字符。

// mpvue-entry 源码
...
  // 获取新旧入口文件模板
  // const template = String(fs.readFileSync(templatePath)).replace(/.*mpType.*/, '');
  const template = `
    import Vue from 'vue'
    import App from './index'

    const app = new Vue(App)
    app.$mount()

    export default {
    }
  `
  const bakTemplate = fs.existsSync(bakTemplatePath) ? String(fs.readFileSync(bakTemplatePath)) : '';

  const isTemplateChanged = template !== bakTemplate;
...

main.js

webpack.base.conf.js

dist/app.json

entry 配置：

// webpack.config.js
{
    // ...
    entry: {
        app: resolve('./src/main.js'),               // app 字段被识别为 app 类型
        index: resolve('./src/pages/index/main.js'),   // 其余字段被识别为 page 类型
        'news/home': resolve('./src/pages/news/home/index.js')
    }
}

输出结构：

├── news
│   ├── home.js
│   ├── home.wxml
│   └── home.wxss
├── pages
│   └── index
│       ├── index.js
│       ├── index.wxml
│       └── index.wxss

使用 mpvue-entry 如何输出类似结构？

// pages.js

module.exports = [
  {
    path: 'pages/index/index'
  }
]

// main.js

tabBar: {
      list: [
        {
          pagePath: 'pages/index/index'
        },
        {
          pagePath: 'pages/index/index'
        }
      ]
    }

pagePath "pages/index/index" 需在 pages 数组中

webpack编译的配置文件中使用方式如下：
const entry = MpvueEntry.getEntry('/src/router/routes.js')

webpack-dev-server --inline --progress --config build/webpack.mpvue.dev.conf.js

编译之后提示模块找不到
Error: Cannot find module '/Users/xx/Workspace/web/node_modules/webpack-dev-server/src/router/routes.js'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Pages.refresh (/Users/xx/Workspace/web/node_modules/mpvue-entry/lib/parser.js:56:19)

您好我目前在用您的这个框架，用了以后，代码非常的优雅了。不知道功能是否有提升规划？
依据 pages 目录结构自动生成 app.json模块的配置。

参考nuxt.js的动态路由

这样实现可行性如何？是否有这样的规划？

问题描述：
今天为了实践下分包加载的特性，先升级下loader版本

-    "mpvue-entry": "^1.2.0",
-    "mpvue-loader": "1.0.12",
+    "mpvue-entry": "^1.4.0",
+    "@f-loat/mpvue-loader": "^1.0.0",

然后mac下编译工作正常，windows下编译正常，但运行时提示每个页面中引入的js和css路径都找不到了

比如某个页面的main.js中，头部包含如下引用代码：require("..\..\..\..\manifest\js\main.js")，win下变成了反斜杠

在开发者工具控制台提示“找不到文件......manifestjsmain.js”，提示错误中连反斜杠都没有了

pages/index.js 出现脚本错误或者未正确调用 Page()

这个是官方mpvue中的引入方式,表现正常

这个是在mpvue-entry的main.js中的引入方式,实际页面引用的时候无效,表现为空白元素

报错内容

未找到 app.json 中的定义的 pages "pages/account/home" 对应的 WXML 文件

目录结构

源码

main.js

import Vue from 'vue';
import App from '@/App';
Vue.config.productionTip = false;
const app = new Vue(App);
app.$mount();
export default {
  config: {
    pages: [],
    window: {},
    tabBar: {}
  }
};

pages.js

module.exports = [
  {path: '/pages/account/home'}
];

build/webpack.base.conf.js

var path = require('path');
var fs = require('fs');
var utils = require('./utils');
var config = require('../config');
var vueLoaderConfig = require('./vue-loader.conf');
var MpvuePlugin = require('webpack-mpvue-asset-plugin');
const getEntry = require('mpvue-entry');
var glob = require('glob');
function resolve (dir) {
  return path.join(__dirname, '..', dir);
}
module.exports = {
  entry: getEntry('./src/pages.js'),
  target: require('mpvue-webpack-target'),
  output: {

我想根据NODE_ENV配置app.json：

const app = new Vue(App)
app.$mount()

export default {
  // 这个字段走 app.json
  config: {
    pages: [],
    window: {
      backgroundTextStyle: 'light',
    },
    debug: process.env.NODE_ENV !== 'production',
  },
}

然后热更新报错

 ERROR  Failed to compile with 1 errors                                                                                     11:30:43

 error  in ./src/main.js

Module build failed: ReferenceError: unknown: process is not defined
    at evalmachine.<anonymous>:12:10
    at ContextifyScript.Script.runInContext (vm.js:35:29)
    at /Users/mai/tmp/up-activities/node_modules/babelon/index.js:32:12
    at Object.babelon.eval (/Users/mai/tmp/up-activities/node_modules/babelon/index.js:43:31)
    at Property (/Users/mai/tmp/up-activities/node_modules/@f-loat/mpvue-loader/lib/mp-compiler/parse.js:34:69)
    at NodePath._call (/Users/mai/tmp/up-activities/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/mai/tmp/up-activities/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/mai/tmp/up-activities/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/mai/tmp/up-activities/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/mai/tmp/up-activities/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/Users/mai/tmp/up-activities/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/Users/mai/tmp/up-activities/node_modules/babel-traverse/lib/index.js:114:17)

如果重新编译的话，终端停住，一直等都没有出结果

"mpvue-entry": "^0.3.7"：这个版本正常；
"mpvue-entry": "^1.2.4"：升级后多页面共用组件样式无法加载，已确认文件配置OK

启动页面：
/src/pages/index/index.vue

分包页面（以test模块包为例）：
/src/module/test/index/index.vue
/src/module/test/index/cat.vue

pages.js：

{
        path: 'pages/index',
        config: { 
            enablePullDownRefresh: true
        }
},
{
        path: 'module/test/index',
        root: 'module/test',
        config: {
            enablePullDownRefresh: true
        }
},
{
        path: 'module/test/cats',
        root: 'module/test',
        config: {
            enablePullDownRefresh: true
        }
},

微信开发者console报错：

subPackages[1].root 不能为 subPackages[0].root 的子目录

看上去真的不是很明白，请问这里应该怎么配置根路径才能成功？

目前所有页面的图片都是放到根目录下的/static里面的，里面包括分包的图片，所以占用了主包的大小了，导致主包超出了2M限制，现在想把分包的资源放回到分包里面去，我尝试过以下操作：

分包1目录：/src/module/test1

pages.js:
{
        path: 'module/test1/index',
        subPackage: true,
        config: { // 页面配置，即 page.json 的内容，可选
            navigationBarTitleText: '品牌榜',
            enablePullDownRefresh: false
        }
    },

然后我将分包1的图片资源放在/src/module/test1/assets/images中，但是打包出来后图片都不见了。看过dist里面的module，原来是assets文件夹没有了，请问这个分包资源应该放到哪里让分包加载呢？

如图，使用npm run dev 命令后，这个json文件并没有生成，然后小程序顶部标题不会变，手动复制老项目里面的json文件才行

pages.js截图

目前依赖版本
"mpvue-loader": "^1.1.2-rc.4"
"webpack-mpvue-asset-plugin": "~0.1.0"

rt

我在main.js 里引入 import './styles/common.css' 就报这个错误，怎么情况？

修改页面的时候经常出现WAIT Compiling... 重新编译又好了，是不是跟插件有关？

控制台报错:

 error  in ./~/[email protected]@mpvue-entry/pagesIndexIndex.js

Module parse failed: D:\Workspace\gst-weapp-mpvue\node_modules\[email protected]@mpvue-entry\pagesIndexIndex.js Unexpected token (10:2)
You may need an appropriate loader to handle this file type.
| const app = new Vue({
|   store,
|   ...App
| })
| app.$mount()

下面是 webpack.base.conf.js:

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'mpvue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        include: [resolve('src'), resolve('node_modules/mpvue-entry')],
        use: [
          'babel-loader',
          {
            loader: 'mpvue-loader',
            options: {
              checkMPEntry: true
            }
          },
        ]
      },

pages.js

module.exports = [
  {
    path: '/pages/index/index',      // 页面路径，同时是 vue 文件相对于 src 的路径
    config: {                      // 页面配置，即 page.json 的内容
      enablePullDownRefresh: true
    }
  },
  {
    path: '/pages/personal_center/index',
    config: {
      navigationBarTitleText: '我的'
    }
  }
]

跟readme反复对比了下没发现配置哪里有问题, 求解

问题：
webpack配置rules中的 test: /\.vue$/ use多个loader后webpack报错：
没有找到空闲端口，请打开任务管理器杀死进程端口再试 Error: No loader specified

目前看到的原因是/lib/index.js 中 line 47：
const { loader } = compiler.options.module.rules.find(rule => rule.test.source === '\\.vue$') || {};
如果rules中是使用多个loader，这里获取到的loader是undefined的。。。

报错主要集中在import，
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/no-unresolved)
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/no-extraneous-dependencies)
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/no-duplicates)
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/extensions)

事件绑定失败？

VM395:1 thirdScriptError
Cannot read property 'sendEvent' of undefined;at pages/index/index page handleProxy function
TypeError: Cannot read property 'sendEvent' of undefined

如果main.js不在src目录下，将导致错误，建议可以自定义main.js的路径。

今天在原有的mpvue项目上增加mpvue-entry，在经过下面的配置后，编译通过，显示结果：
（1）首页的title、设置下拉都可以看到是有效果的
（2）小程序的页面内容却是空白，不过里面触发的一些方法（如调用接口数据）则正常调用了。
是我漏了什么步骤或者哪个步骤错了吗？感谢指导

build/webpack.base.conf.js：

src/pages1.js：（原来有很多的路由页面，但我只先填写了首页的测试一下）

代码目录结构：

微信开发工具查看结果：

D:\vue\xcool\node_modules\mpvue-entry\index.js:1
(function (exports, require, module, __filename, __dirname) { import Vue from 'vue'
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:607:28)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object. (D:\vue\xcool\build\webpack.base.conf.js:3:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

改了main.js里面的index入口，或者其他文件，每次都要去node_modules下面删掉mpvue-entry然后重新安装才能编译

src/main.js 文件中如果有 App.mpType = 'app'，将导致编译后的文件出现“出现脚本错误或者未正确调用 Page()”

需要在处理模版文件时，替换为App.mpType = 'page'，才能正常使用。

test.routes.js

const testRoutes = require('./test/index');

module.exports = testRoutes;

我想通过其他配置文件导入，但是会把test.routes.js文件缓存起来，第二次路径肯定不对的，可以加个配置项，是否缓存吗

一导入就报错，去掉就没事，而且注释后热启动还是报错，必须重启
但是在App.vue中style下导入时可以的

这个不起作用，页面还是被编译了

app.js 导入公共样式会出现 webpack: This relative module was not found

报错主要集中在import，
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/no-unresolved)
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/no-extraneous-dependencies)
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/no-duplicates)
[eslint] Resolve error: Cannot find module '/Users/xxx/.vscode/extensions/dbaeumer.vscode-eslint-1.4.8/client/node_modules/vscode-languageclient/lib/src/pages.js' (import/extensions)

在webpack.base.conf.js里
plugin: [new MpvueEntry()] 代替了原来的 MpvuePlugin
我试过 不换 项目根本启动不了 替换了才能正常使用
这样换了一个plugin 对项目最终打包上线 不会有影响吧？

按照文档配置好后运行会提示以下错误
These dependencies were not found:

• @/pages/index/main in ./node_modules/mpvue-entry/dist/pagesIndexMain.js
• @/pages/logs/main in ./node_modules/mpvue-entry/dist/pagesLogsMain.js

pages下的main.js不是应该删除掉由mpvue-entry生成的吗？

module.exports = [
{
path: '/pages/index/index',
name: 'Index',
config: {
navigationBarTitleText: '首页',
enablePullDownRefresh: true,
onLoad: function () {
console.log('onLoad')
}
}
}
]y
the onLoad hook function is ignored in the output by the JSON.stringify().so this is not for life hook confg?

var MpvueEntry = require("mpvue-entry");
...
module.exports = { entry: MpvueEntry.genEntry("src/router/routes.js"),

TypeError: MpvueEntry.genEntry is not a function at Object.<anonymous> (/My/suishoupai/build/webpack.base.conf.js:14:21)

package.json
"mpvue-entry": "^1.2.4",

我是按照simple里配置来的 不知道为什么总报这个错

假设有 10 个 page，其中有两个 page ，开发者工具上正常，iOS 9 和 部分低端安卓手机报这个错误

"mpvue": "^1.0.12",
 mpvue-entry 最新版