Giter VIP home page Giter VIP logo

mpvue-entry's Introduction

mpvue-entry

自动生成构建入口,避免编写大量重复的 main.js 文件

npm package npm downloads build status codecov codebeat badge license

目录结构

├─build
├─config
├─src
│ ├─components
│ ├─pages
│ │  └─news
│ │     │─list.vue
│ │     └─detail.vue
│ ├─App.vue
│ ├─app.json
│ └─main.js
└─package.json

Quickstart

https://github.com/F-loat/mpvue-quickstart

vue init F-loat/mpvue-quickstart my-project

安装

npm i mpvue-entry@next -D

使用

v2.0 版本仅支持 mpvue-loader@^1.1.0,兼容 megalo

// webpack.base.conf.js
const MpvueEntry = require('mpvue-entry')

module.exports = {
  entry: MpvueEntry.getEntry('src/app.json'),
  ...
  plugins: [
    new MpvueEntry(),
    ...
  ]
}
// app.json - 支持 js 格式,兼容微信小程序官方配置规范
{
  "pages": [
    {
      "path": "pages/news/list", // 页面路径,同时是 vue 文件相对于 src 的路径,必填
      "config": { // 页面配置,即 page.json 的内容,可选
        "navigationBarTitleText": "文章列表",
        "enablePullDownRefresh": true
      }
    }
  ],
  "window": {}
}

参数

  • paths: String/Object

paths 为 String 类型时作为 config 的值,为绝对路径或相对于项目根目录的相对路径

property default describe
config 'src/app.json' 项目配置文件
main 'src/main.js' 主入口文件,作为模板
template 'src/main.js' 入口模板文件,优先级较高
entry 'mpvue-entry/dist/' 各页面入口文件目录
// 示例
MpvueEntry.getEntry({
  config: 'src/app.js',
  main: 'src/index.js'
})
  • pages [String/Object]

pages 元素为 String 类型时作为 path 的值,为绝对路径或相对于项目根目录的相对路径

property type default describe
path String - 文件路径
config Object {} 页面配置
route String - 页面路由
native Boolean false 原生页面
subPackage Boolean false 分包加载
root String - 分包根路径
name String root 分包别名
independent Boolean false 独立分包
// 示例
[
  'pages/index',
  {
    path: 'pages/news/list',
    config: {
      navigationBarTitleText: '页面标题'
    },
    route: 'pages/news/list/main'
  },
  {
    path: 'package/news/detail',
    root: 'package/news',
    subPackage: true,
    independent: true
  }
]

Tips

  • 首页为 pages 数组的第一项

  • 分包配置兼容微信小程序官方写法

  • paths 的相关配置均可在项目 package.json 的 entryOptions 中覆盖

  • 可通过以下形式的注释指定 main.js 特有代码

console.log('hello world') // app-only

/* app-only-begin */
console.log('happy')
console.log('coding')
/* app-only-end */
  • 官方模板生成的项目请务必去除以下配置
// webpack.base.conf.js
module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: '**/*.json',
      to: ''
    }], {
      context: 'src/'
    }),
    ...
  ]
}
  • megalo 官方已对打包入口做了类似的优化,如无迁移需求可直接采用官方方案

Thanks

mpvue-entry's People

Contributors

coderliwenjie avatar cweili avatar f-loat avatar fansenze avatar hellozjw avatar ltinyho avatar weiyunpeng avatar zhuchentong avatar zzmark avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mpvue-entry's Issues

按照使用教程配置后,小程序页面空白

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

build/webpack.base.conf.js:
image
image

src/pages1.js:(原来有很多的路由页面,但我只先填写了首页的测试一下)
image

代码目录结构:
image

微信开发工具查看结果:
image

如何指定 tabbar 页面路径?

// 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 数组中

pages.js能够引入其他js组成最终的路由列表吗

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

image

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

router目录:
_20180628153441

无法编译wxml文件

报错内容

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

目录结构

image

源码

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: {

共用组件样式无法加载

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

使用 mpvue-entry 后 eslint 报错

报错主要集中在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)

在 src/main.js 中使用 Vue.mixin() 会多次执行

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('检查是否已经绑定了手机号码')被执行了多次

1524339804113

原因:由于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;
...

getEntry使用路径参数的问题

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)

导入css、less后报错

e s q9o w848ukmy _ g
image
一导入就报错,去掉就没事,而且注释后热启动还是报错,必须重启
但是在App.vue中style下导入时可以的

请问分包资源放在哪里和如何加载?

目前所有页面的图片都是放到根目录下的/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文件夹没有了,请问这个分包资源应该放到哪里让分包加载呢?

使用 mpvue-entry 后 eslint 报错

报错主要集中在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)

无法正确查找文件

按照文档配置好后运行会提示以下错误
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生成的吗?

routes配置文件缓存问题

test.routes.js

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

module.exports = testRoutes;

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

设置分包根路径后报错

启动页面:
/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 的子目录

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

MpvueEntry.genEntry is not a function

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里配置来的 不知道为什么总报这个错

pages.js能否去掉?

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

参考nuxt.js的动态路由

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

win10下页面中js和css路径获取有问题

问题描述:
今天为了实践下分包加载的特性,先升级下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”,提示错误中连反斜杠都没有了

编译出错,提示缺少合适的加载器 appropriate loader

控制台报错:

 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$/ 使用多个loader后webpack报错

问题:
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的。。。

整合第三方ui

引入weui的时候报路径错误,想问一下正确的引入方式
2018-05-28 11 51 45
2018-05-28 11 51 51

项目运行无法生成json文件 页面标题不显示

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

pages.js截图
image

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

这个是什么问题?

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然后重新安装才能编译

使用 mpvue-entry 如何进行分包配置?

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 如何输出类似结构?

config能否在page.vue文件中配置

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

出现脚本错误或者未正确调用 Page()

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

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

can not support life hook function config

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?

main.js里的app config无法使用process.env.NODE_ENV?

我想根据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)

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.