Vue.js 2中使用Paged.js遇问题：Previewer未找到及Webpack解析错误

问题场景 #

用户在Vue.js 2中尝试集成Paged.js，编写代码如下：

let paged = new Previewer();
paged.preview('test', [], document.body).then((flow) => {
console.log("Rendered", flow.total, "pages.");
});

运行时遇到两个问题：

1. 报错：1:1188-1197 export 'Previewer' was not found in 'pagedjs'
2. Webpack解析./node_modules/pagedjs/dist/paged.js文件时出现Unexpected token (3072:8)错误，提示需合适的loader处理async*语法

相关配置 #

webpack.base.config.js中的babel-loader配置

{test: /.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/paged')]}
{test: /.js$/,include: [resolve('node_modules/pagedjs') // Include pagedjs for transpilation],use: [{loader: 'babel-loader'}]}

package.json的devDependencies内容

{"version": "1.0.0","description": "node tech template","private": true,"scripts": {"dev": "node build/dev-server.js","start": "npm run dev","build": "node build/build.js","deploy": "firebase deploy --only hosting"},"devDependencies": {"autoprefixer": "^7.1.2","babel-core": "^6.22.1","babel-eslint": "^8.2.6","babel-loader": "^7.1.1","babel-plugin-transform-runtime": "^6.22.0","babel-preset-env": "^1.3.2","babel-preset-stage-2": "^6.22.0","babel-register": "^6.22.0","connect-history-api-fallback": "^1.3.0","copy-webpack-plugin": "^4.0.1","css-loader": "^0.28.11","eslint": "^5.1.0","eslint-config-airbnb": "^17.0.0","eslint-config-prettier": "^2.9.0","eslint-plugin-jsx-a11y": "^6.1.0","eslint-plugin-prettier": "^2.6.2","eslint-plugin-react": "^7.21.4","eventsource-polyfill": "^0.9.6","express": "^4.16.2","extract-text-webpack-plugin": "^3.0.0","file-loader": "^1.1.4","friendly-errors-webpack-plugin": "^1.6.1","html-webpack-plugin": "^2.30.1","http-proxy-middleware": "^0.20.0","opn": "^5.1.0","optimize-css-assets-webpack-plugin": "^3.2.0","ora": "^1.2.0","portfinder": "^1.0.26","rimraf": "^2.6.0","semver": "^5.3.0","shelljs": "^0.7.6","uglifyjs-webpack-plugin": "^2.2.0","url-loader": "^0.5.8","vue-loader": "^13.3.0","vue-style-loader": "^3.0.1","vue-template-compiler": "^2.6.10","webpack": "^3.6.0","webpack-bundle-analyzer": "^2.9.0","webpack-dev-middleware": "^1.12.0","webpack-hot-middleware": "^2.18.2","webpack-merge": "^4.1.0"},"engines": {"node": ">= 4.0.0","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"]}

解决方案 #

问题1：Previewer导出不存在的解决办法 #

Paged.js的API导入方式有误，需调整导入逻辑：

• 检查版本对应的导出结构，使用正确的导入方式：

// 方式1：通过默认导出访问Previewer
import PagedJS from 'pagedjs';
let paged = new PagedJS.Previewer();

// 方式2：直接导入命名导出的Previewer
import { Previewer } from 'pagedjs';
let paged = new Previewer();

若仍有问题，可尝试通过CDN引入UMD版本的Paged.js，直接使用全局变量PagedJS进行调用。

问题2：async*语法解析错误的解决办法 #

当前Babel版本无法处理async*这类ESNext语法，需升级Babel并调整配置：

1. 升级Babel依赖：卸载旧版Babel包，安装Babel 7相关依赖：

npm uninstall babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-plugin-transform-runtime
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime babel-loader@8 --save-dev

2. 修改Babel配置：在项目根目录创建或更新.babelrc文件：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

3. 修正Webpack的babel-loader规则：合并重复规则，修正目录名错误：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('test'),
    resolve('node_modules/pagedjs') // 原配置中的'paged'是错误目录名
  ]
}

4. 可选：升级Webpack版本：若后续仍有兼容性问题，可将Webpack 3升级到Webpack 4，同步替换extract-text-webpack-plugin为mini-css-extract-plugin以适配新版Webpack。

内容的提问来源于stack exchange，提问作者Deepak Walia