Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

shim4webpack

0.0.2 • Public • Published

ES5Shim4Webpack

解决webpack打包css/img到js后不支持ES5的问题

run

//import
var ES5Shim4Webpack = require("shim4webpack");
// plugins add
plugins: [
    new ES5Shim4Webpack({
     warnings: true, 
     logContext: true
    })
]

概述

如果需要将css或者图片等静态资源打包到一个js文件中,这是在webpack内部会用到ES5的一些方法(bind和filter):

  • filter
var replaceText = (function () {
    var textStore = [];
    
    return function (index, replacement) {
        textStore[index] = replacement;
        return textStore.filter(Boolean).join('\n');
    };
})();
  • bind
function addStyle(obj, options) {
     var styleElement, update, remove;
 
    if (options.singleton) {
        var styleIndex = singletonCounter++;
        styleElement = singletonElement || (singletonElement = createStyleElement(options));
        update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
        remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
    } 
    //...
}

在不支持ES5的浏览器中,如果不对打包后的文件处理程序将跑不起来

解决方案

在webpack打包的时候,拦截打包文件,动态加入ES5Shim

用法

以webpack插件的方式引入ES5Shim4Webpack到你的webpack.config.js配置文件中

var webpack = require('webpack');
var ES5Shim4Webpack = require("./ES5Shim4Webpack");
module.exports = {
    entry: "./app.js",
    output: {
        path: __dirname + "/build/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: "style!css" },
            {test: /\.scss$/, loader: "style!css"},
        ]
    }
    /*use the plugins*/
    ,plugins: [
        new ES5Shim4Webpack({
            warnings: true, 
            logContext: true
        })
    ]
}

效果

/******/ (function(modules) { // webpackBootstrap
/******/
/******/    //bind
/******/ if(!Function.prototype.bind){
/******/   Function.prototype.bind = function(){   
/******/  var fn = this, 
/******/  args = [].slice.call(arguments), 
/******/  object = args.shift();   
/******/  return function(){   
/******/  return fn.apply(object,args.concat([].slice.call(arguments)));   
/******/  }
/******/  }
/******/  }
 
/******/ //filter
/******/ if (!Array.prototype.filter){
/******/ Array.prototype.filter = function(fun /*, thisp*/){
/******/  var len = this.length;
/******/  if (typeof fun != "function") throw new TypeError(); 
/******/  var res = new Array();
/******/  var thisp = arguments[1];
/******/  for (var i = 0; i < len; i++){
/******/  if (in this){
/******/  var val = this[i]; // in case fun mutates this
/******/  if (fun.call(thisp, val, i, this)) res.push(val);
/******/  }
/******/  } 
/******/  return res;
/******/ }
/******/ }
 
/******/  // The module cache
/******/  var installedModules = {};
 
/******/  // The require function
/******/  function __webpack_require__(moduleId) {
 
/******/  // Check if module is in cache
/******/  if(installedModules[moduleId])
/******/  return installedModules[moduleId].exports;
 
/******/  // Create a new module (and put it into the cache)
/******/  var module = installedModules[moduleId] = {
/******/  exports: {},
/******/  id: moduleId,
/******/  loaded: false
/******/  };
 
/******/  // Execute the module function
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 
/******/  // Flag the module as loaded
/******/  module.loaded = true;
 
/******/  // Return the exports of the module
/******/  return module.exports;
/******/  }
 
 
/******/  // expose the modules object (__webpack_modules__)
/******/  __webpack_require__.m = modules;
 
/******/  // expose the module cache
/******/  __webpack_require__.c = installedModules;
 
/******/  // __webpack_public_path__
/******/  __webpack_require__.p = "";
 
/******/  // Load entry module and return exports
/******/  return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ 

Keywords

none

Install

npm i shim4webpack

DownloadsWeekly Downloads

2

Version

0.0.2

License

MIT

Last publish

Collaborators

  • avatar