umd文件怎么打开(苹果手机怎样打开umd文件)

教你写一个Vue组件发布到npm，外链也可以引入使用。序

umd文件怎么打开(苹果手机怎样打开umd文件)插图

为什么我们必须编写一个组件并将其上传到npm映像？我们一定遇到过这样的场景，项目中有很多地方和某个功能相似。你必须想到的是把功能封装成一个组件构件，方便我们以后调用。但是过了一段时间，你的领导让你去开发另一个项目。结果你在哪个项目里看到了类似的功能。那你会怎么做？也可以用Ctrl+c+v的解决方案，得到最后一个项目的打包代码。但是，如果需求发生了一些变化，您就必须维护两套项目代码，甚至在将来维护更多的项目...这时候你可以打包一个功能，上传到你公司内网npm(或者你自己的账号)。这样，每次遇到类似的功能，都可以直接安装导入到NPM使用。当需求发生变化时，您可以完全更改一个代码。

配置环境

我在这里使用的是Webpack配置(不要介意)，或者我可以安装一个简单版本的Vue-cli，它具有暴露Webpack的配置(您必须修改自己的配置)。让我们配置打包组件环境。通常，umd格式用于开发组件库，它支持es模块、CommonJs和AMD。主要的是Webpack中的library和libraryTarget。如果不明白，请看这里详细解释webpack的out.libraryTarget属性。

我这里的Webpack版本是4，最好用本章的插件版本号安装，避免版本兼容的问题。

项目结构|- /node_modules|- /src |- Tag.vue |- main.js|- index.html|- webpack.config.js|- package.json复制代码初始化包. jsonnpm init -y复制代码安装Webpack &&加载器&&插件cnpm i webpack webpack-cli -Dcnpm i css-loader style-loader -Dcnpm i file-loader -Dcnpm i vue-loader@15.7.0 vue vue-template-compiler -Dcnpm i html-webpack-plugin@3.2.0 -D复制代码css-loader style-loader 配置.css文件及样式使用file-loader 配置特殊字体和图片使用vue-loader 处理.vue文件后缀vue 使用Vue语法vue-template-compiler 处理.vue文件里的template模板语法网络包.配置. jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')const HtmlWebpackPlugin = require("html-webpack-plugin")module.exports = { mode: "development", entry: "./src/main.js", output: { filename: "index.js" }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"] }, { test: /\.(ttf|eot|woff|svg|woff2)/, use: "file-loader" }, { test: /\.vue$/, use: "vue-loader" } ] }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: "./index.html" }) ]}复制代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app"></div></html>复制代码

以上基本环境已经建立。您可以使用npx webpack在终端上运行它。

包装组件

这里我就打个比方，代码就没那么复杂了。大家都知道怎么包装，怎么用。具体套餐看你公司要求~。这里，我以元素Ui组件为例。相信大部分小伙伴公司也在用Element Ui。如果我们的项目中有以下类似的功能，可以单独打包。

主页. jsimport Vue from 'vue'import { Tag } from 'element-ui';import 'element-ui/lib/theme-chalk/tag.css';import customTag from "./Tag.vue"Vue.component(Tag.name, Tag)export default customTag复制代码Tag.vue<template> <div class="Tag"> {{ msg }} <el-tag type="success">标签二</el-tag> </div></template><script>export default { name: 'Tag', data() { return { msg: "hello 蛙人", } }, created() { }, components: {}, watch: {}, methods: { }}</script><style scoped></style>复制代码网络包.配置. js

修改webpack.config.js中的输出，如下所示

output: { filename: "index.js", library: "Modal", libraryTarget: "umd"}复制代码

配置完成后，可以使用npx webpack对其进行打包。可以看到有一个dist目录，这个目录下有一个index.js。这个文件是我们打包的Tag.vue文件，您可以将它引入到您的项目中并调用。该文件支持Es模块、CommonJs和AMD。

import Vue from 'vue'import { Tag } from 'element-ui';import 'element-ui/lib/theme-chalk/tag.css';Vue.component(Tag.name, Tag)import CustomTag from "./index" // 打包完的，直接引入进来new Vue({ el: "#app", render: h => h(CustomTag)})复制代码Npm发布

如果你没有npm账号，先去官网这里注册一个npm账号。

创建新的发布包项目文件夹。

在终端执行npm init -y来创建初始的package.json文件。主要信息是名称和主要字段。前者是这个包的名字(也就是NPM InstallXXX)，后者是我们打包的文件标签文件。默认情况下，Main将转到这个条目文件。

注意:包名不能包含大写，包名不能包含大写，包名不能包含大写，重要的事情要说三遍。

{ "name": "custom-tag-waren", "version": "1.0.0", "description": "这是xxxx", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "WaRen", "license": "ISC"}复制代码

如果淘宝图片之前被修改过，先把它改回来，执行下面的命令。

npm config set registry http://registry.npmjs.org复制代码

注册后，执行npm登录，依次填写自己的用户名、密码、邮箱。

执行npm发布，然后等待进度条完成。

整理一些常见的发布错误。

这是因为镜子设置为淘宝镜，设置回去就好了。

no_perms Private mode enable, only admin can publish this module复制代码

一般不登录，重新登录npm登录即可。

npm publish failed put 500 unexpected status code 401复制代码

包名被占用，改包名就好。最好在官网查看是否有任何包名被占用，然后重新命名。

npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?复制代码

该邮箱未经验证。去官网验证邮箱。

you must verify your email before publishing a new package复制代码Npm的安装和使用cnpm i custom-tag-waren -D复制代码主页. jsimport Vue from 'vue'import { Tag } from 'element-ui';import 'element-ui/lib/theme-chalk/tag.css';import customTagWaren from "custom-tag-waren" // 下载完引入进来Vue.component(Tag.name, Tag)new Vue({ el: "#app", render: h => h(customTagWaren)})复制代码

到目前为止，我们已经完成了一个组件的打包、上传和下载，这样就可以在每个项目需要的时候直接安装npm install，只改变一个文件然后在需求改变的时候重新发布。不太方便。

外链介绍

我们也不上传到npm，直接以外链的形式使用。让我们来看看吧。

进口介绍<template> <div class="Tag"> <TagEl/> </div></template><script>import TagEl from "./index"export default { name: 'Tag', data() { return { } }, components: { TagEl },}</script><style scoped></style>复制代码

在上面的例子中，我们可以看到index.js文件是直接引入的，组件是注册的，所以可以直接使用。

剧本介绍<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app"> <Tag/> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <script type="text/javascript" src="./dist/index.js"></script></body><script> new Vue({ el: "#app", components: { Tag: Tag.default } })</script></html>复制代码

上面的例子直接用脚本标签来介绍，注册后也可以使用。那么我们怎么知道他的名字是泰格呢？使用此薪资包组件时，必须指定名称。

export default {name: "Tag"}复制代码

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。

作者：美站资讯，如若转载，请注明出处：https://www.meizw.com/n/124001.html

umd文件怎么打开(苹果手机怎样打开umd文件)

相关推荐

发表回复