1.1.2 • Published 7 years ago

file_version v1.1.2

Weekly downloads
2
License
ISC
Repository
github
Last release
7 years ago

一个简单的版本替换npm包


使用场景

在jsp等页面中需要对引入的文件进行版本控制

注意:此包需要搭配 assests-webpack-plugin 结合使用

具体使用流程(一个简单的例子)

  • 安装
npm install assets-webpack-plugin --save-dev
npm install file_version --save-dev
  • 配置 webpack.config.js
// 加载依赖
var AssetsPlugin = require('assets-webpack-plugin');
var AssetsReplaceVersion = require('file_version');
// 配置plugins
plugins: [
    new AssetsPlugin({
      filename: 'public/asset.js',
      processOutput: function (assets) { 
        /* 
        * 由于 AssetsReplaceVersion 直接读取文件内容
        * 此处请不要进行修改
        */
        return JSON.stringify(assets);
      }
    }),
    new AssetsReplaceVersion({
      filename: 'public/asset.js',   // 必选项
      includePath: 'public/include', // 必选项 请确保include中没有文件夹,否则读取失败
      // filter: 'public',              
      /* 可选项 过滤规则
                可以是字符串或者数组
                可以是路径或文件名(请确保与文件中的一致)
      */
    })
    ...
]
  • jsp
// 在jsp中引入带有版本信息的html片段
<%@ include file="public/include/header.html" %>
  • header.html
// 待替换的目标文件
// 此处,存放在include文件夹中
<script src="build/js/bundle.js?v=b02348e10dd02f729e9c"></script>
<link rel="stylesheet" type="text/css" href="static/css/style.css?v=b02348e10dd02f729e9c">
  • assets.js
// 由 assets-webpack-plugin 生成
{"main":{"js":"build/js/bundle.js?v=b02348e10dd02f729e9c", "css":"static/css/style.css?v=b02348e10dd02f729e9c"}}

以上面的例子为例: 使用webpack进行打包后,assets-webpack-plugin会先生成一个记录各文件版本信息的assets.js文件,然后 file-version 会读取 assets.js中的json字符串,然后遍历include中的文件,替换相应的字段。

注意:

  • html片段文件存放在include(可随意命名)文件夹中,并且此文件夹不能包含其他文件夹,否则会读取失败

由于插件功能简单,适用场景有限

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago