前段时间供销社有个须要,我们部门开辟叁个平台项目事后,其他兄弟单位支出出的插件我们得以拿来一贯用,并且没有必要大家再进行李包裹装,只是做静态的文书引进,切磋一波后发觉,webpack创立library能够实现。

     
 随着专业的加码,大概存在这里么风姿洒脱种必要,正是索要从h5中央直属机关接跳转到app。若无安装app的话,则提示到使用市镇照旧app
store下载安装。但是难点就在此个地点,单纯的用h5是从未艺术剖断是不是安装过app的,可是那些是难不倒程序猿的,他们日常会用这种代码来解决

大器晚成,张开Sublime
Text,代码如上边所示。

创建library

  • 完全代码
  • 基本代码为

    output: {
        path: DIST_PATH,
        publicPath: "",
        chunkFilename: "[name].js",
        filename: "testPlugin.js",
        libraryTarget: 'umd',//将你的 library 暴露为所有的模块定义下都可运行的方式
        library: 'testPlugin'
    },
  • 包裹出来后我们会获得多个testPlugin.js,那就是我们和好的三方库。

    阳台项目中动用

  • 类型中设置externals,指标是使自身项目不会重复打包引进的库

    externals: {
        testPlugin:"testPlugin",
    },
  • 体系引入

<!--index.html-->
<script src="testPlugin.js"></script>

//index.js
import testPlugin from 'testPlugin';
console.log(testPlugin);
  • 品类打包好
  • 将testPlugin库丢入打包好的dist中
  • 会发觉平台项目早已打响引进库
  • 如此那般会发掘独有打包好dist再丢入库才方可以预知到功用,平常支出条件下怎么做呢,能够使用copy-webpack-plugin,及将静态的公文夹自动拷贝到dist

const copyWebpackPlugin = require('copy-webpack-plugin');

    plugins: [
        new copyWebpackPlugin([{
            from:__dirname+'/src/static',//打包的静态资源目录地址
            to:'./static' //打包到dist下面的static
        }]),
    ...
    ]
  • 然后只需求改过index.html的引进地址

<script src="static/plugin/testPlugin/testPlugin.js"></script>
1 window.location.href = 'app的协议';
2 
3 setTimeout(function() {
4 window.location.href = 'app的下载地址'
5 },500)

 

发布npm包

上面包车型大巴法子的独到之处是:假如兄弟部门的三方库变了,只供给他们把打包好的库文件给大家,大家丢进去替换掉早先的就足以了,大家和好并无需重新包装。

那宣布npm包呢?本身有空又寻觅了一波,并打响发表了一个能够对文件插入表情的react小插件。
——传送门——

     
其实代码很简短,先去跳转公司有线组app的自定义的schema公约;若无设置的app的话,第风度翩翩行的代码是不见到成效的,然后500ms跳转到app的下载地址,常常是是依据tx的亲外孙子应用宝大概app
store
的下载连接。然则这种完成情势也可能有题指标,因为您在微信中依旧qq中不怕安装app的话,也不会跳转到app中的,因为你司的app的schema左券是禁绝跳转的,除非步入了白名单。假若没步入Wechat的白名单的话,化解方式平时在h5页面有个别地点加上二个简单易行的tips.提示用浏览器展开那个页面。要是设置了app,在浏览器能够正确的开垦app的。当然,那是安装了app的动静,当未有安装app的话,向上诉讼代码在Wechat是从未有过任何难点的,反正又万般无奈跳schema的,跳转到app的下载地址确定是百无一失的。不过大家在上一步提醒客商在浏览器张开页面,这个时候难题又来了。那时候会冒出二个憎恶的规模,这种局面是未曾什么好点子明确命令防止的。发生的原由嘛。正是特别schema左券搞得鬼。此时咱们的缓和形式,便是在上一步的tip中唤醒‘假诺设置了app的话,用浏览器张开’,哈哈,这么轻便的呗,其实过多商家都是如此做的,轻巧直接。如今大家的店堂就是这种办法。也许直接给五个按键算了。二个张开,一个下载。有些时候,化繁为简未尝不是后生可畏种适于的办法。

图片 1

发表评论

电子邮件地址不会被公开。 必填项已用*标注