在写组件库时用vue-cli 3.x的
vue-cli-service build --target lib --name index [entry]
可以直接构建npm包,npm publish后再通过npm install [name]安装引用一点问题都没有
但是如果是直接在本地引入
import Ea from '../lib/index.umd.js';
没有进行额外配置不出意外是会报错的
这个问题困扰我很久,直到今天看到 Webpack模块引用中还有什么坑? 这篇文章才知道原因找到解决方式
这里需要用到 @babel/plugin-transform-modules-umd
npm install --save-dev @babel/plugin-transform-modules-umd
然后在babel.config.js添加这个plugin
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
plugins: ['@babel/plugin-transform-modules-umd'], //添加这行
};
好了,终于不用每次构建都npm publish生成许多无意义version去实测了
Javascript模块的写法-AMD, CMD, CommonJS和UMD。JavaScript中出现了一些非传统模块开发方式的规范 CommonJS的模块规范,AMD,CMD等。
模块化开发优点:模块化开发中,通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数,并且可以按需加载。依赖自动加载,按需加载。提高代码复用率,方便进行代码的管理,使得代码管理更加清晰、规范。
有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端。客户端提供一个纯粹的 JS 执行引擎
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!