开发技术网站开发技术,做班级玩网站做哪些方面,建站工具官网,做运营必看的网站按照 Vue 2 组件打包并发布到 npm 的方法配置项目后#xff0c;项目在实际开发过程中#xff0c;随着代码写法的多样性增加而遇到的各种打包问题#xff0c;本文将予以逐一解决#xff1a;
本文目录
同时导出多个组件
样式表 import 问题解决
Json 文件 import 问题解决…按照 Vue 2 组件打包并发布到 npm 的方法配置项目后项目在实际开发过程中随着代码写法的多样性增加而遇到的各种打包问题本文将予以逐一解决
本文目录
同时导出多个组件
样式表 import 问题解决
Json 文件 import 问题解决
路径别名无法识别的问题
??, ?. 等运算符无法编译的问题解决
jsx 语法的支持
支持 TypeScript 同时导出多个组件
修改 wrapper.js 即可
import component1 from ./components/MyComponent1.vue;
import component2 from ./components/MyComponent2.vue;export function install(Vue) {if (install.installed) return;install.installed true;Vue.component(MyComponent1, component1);Vue.component(MyComponent2, component2);
}...// export default component;export {component1 as MyComponent1,component2 as MyComponent2,
}
样式表 import 问题解决
script
import ../scss/common.scss;
...
/script
如上代码所示如果在 .vue 页面的 script 标签间 import 样式表(或者在 .js 文件中 import 样式表)会在打包时报错如下 关键报错信息SyntaxError: Unexpected token 针对 .scss, .sass 和 .css 样式表的解决办法如下
安装 rollup-plugin-scss 插件
npm i rollup-plugin-scss -D
修改 rollup.config
...
import scss from rollup-plugin-scss;export default {...plugins: [commonjs(),scss({ insert: true }),image(),...],
};
Json 文件 import 问题解决
script
...
import info from ../data/info.json;export default {...mounted() {console.log(读取 json 文件内容 : , info);},
};
/script
如上代码所示引入 .json 文件会导致打包报错 关键报错信息SyntaxError: Unexpected token 解决方法如下
安装 rollup/plugin-json 插件
npm i rollup/plugin-json -D
修改 rollup.config
...
import json from rollup/plugin-json;export default {...plugins: [commonjs(),scss({ insert: true }),image(),json(),...],
};
路径别名无法识别的问题
如下使用了 Vue 原生支持的 作为路径别名
script
import LOGO from /assets/logo.png;
import /scss/common.scss;
import info from /data/info.json;
...
/script
但打包时会报警告 关键警告信息Unresolved dependencies 解决方法如下
安装 rollup/plugin-alias 插件
npm i rollup/plugin-alias -D
修改 rollup.config
...
import { fileURLToPath } from url;
import path from path;
import alias from rollup/plugin-alias;const __filename fileURLToPath(import.meta.url);
const __dirname path.dirname(__filename);
const projectRootDir path.resolve(__dirname, ..);export default {...plugins: [commonjs(),alias({entries: [{find: ,replacement: path.resolve(projectRootDir, src),}]}),scss({ insert: true }),image(),json(),...],
};
??, ?. 等运算符无法编译的问题解决
如下代码中出现空值合并运算符(??)或可选链运算符(?.)时
script
...
export default {...mounted() {let x;const y x ?? 1;},
};
/script
出现如下报错 关键报错信息SyntaxError: Unexpected token 解决此问题要么把 ?? 和 ?. 的语法替换为其它等效的算法
要么如下所示把本来所用的 rollup/plugin-buble 插件替换为 rollup/plugin-babel 插件
安装 rollup/plugin-babel 插件
npm i rollup/plugin-babel -D
修改 rollup.config
...
import { babel } from rollup/plugin-babel;
...
export default {...plugins: [...vue({css: true, // Dynamically inject css as a style tagcompileTemplate: true, // Explicitly convert template to render function}),// buble({// objectAssign: true,// transforms: {// asyncAwait: false,// forOf: false,// }// }), // Transpile to ES5babel({babelHelpers: runtime,exclude: node_modules/**}),],
};
jsx 语法的支持
templatediv classcomponent my-componentimg :srclogoSrc /Title //div
/templatescript
...
const Title {name: title,render() {return span标题/span; // jsx 语法},
};export default {components: { Title },...
};
/script
以上写法将导致打包出错 关键报错信息(plugin commonjs--resolver) RollupError: Expression expected 解决方法如下
安装 unplugin-vue-jsx 插件
npm i unplugin-vue-jsx -D
修改 rollup.config
...
import VueJsx from unplugin-vue-jsx/rollup;
...
export default {...plugins: [commonjs({ exclude: src/** }), // 需要排除掉包含 jsx 语法的文件否则 VueJsx 无效原因未知...VueJsx({ version: 2 }),vue({css: true, // Dynamically inject css as a style tagcompileTemplate: true, // Explicitly convert template to render function}),...],
};
支持 TypeScript
如果本项目已配置为支持 TypeScript 的 Vue2 项目则在打包时会报错 关键报错信息Note that you need plugins to import files that are not JavaScript 解决方法如下
安装 rollup-plugin-typescript2 插件
npm i rollup-plugin-typescript2 -D
注为什么不使用 rollup/plugin-typescript 请参考 vue.js - Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package - Stack Overflow
修改 rollup.config
...
import typescript2 from rollup-plugin-typescript2;
...
export default {...plugins: [typescript2({useTsconfigDeclarationDir: true,// tsconfigOverride: { // 是否覆盖 tsconfig.json 的设置// compilerOptions: {// declaration: false,// }// }}),commonjs({ exclude: src/** }),...],
};
如果希望输出类型说明文件(d.ts)则增加以下两步
修改 tsconfig.json
{compilerOptions: {...sourceMap: false,declaration: true,declarationDir: dist/types,baseUrl: .,...},...
}
修改 package.json
{...license: MIT,main: dist/my-component.umd.js,module: dist/my-component.esm.js,unpkg: dist/my-component.min.js,types: dist/types/main.d.ts,...
}
如果需要生成 source map则如下配置
修改 tsconfig.json
...
export default {...output: {name: MyComponent,exports: named,sourcemap: true,},...
};
即在 output 中增加 sourcemap: true
tsconfig.json 中的配置项 sourceMap 最好也写成 sourceMap: true虽然在本案例中并不会形成实质区别 衍生问题解决
如下按 ts 风格编写的 Vue 组件中引入了 vue
script langts
import Vue from vue;
...export default Vue.extend({...
});
/script
打包时会报如下警告 关键警告信息Unresolved dependencies 消除警告方法如下
安装 rollup/plugin-node-resolve 插件
npm i rollup/plugin-node-resolve -D
修改 rollup.config
...
import resolve from rollup/plugin-node-resolve;
...
export default {...plugins: [...scss({ insert: true }),image(),json(),resolve(),VueJsx({ version: 2 }),...],
};
