Question

如何使用browserify或webpack正确填充javascript并且没有额外的文件？

我们以使用react或react-redux为例。我在package.json中有这个配置：

{
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"
          ]
        }
      ],
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "global:$",
    "react": "global:React",
    "react-addons-update": "global:React.addons.update",
    "react-dom": "global:ReactDOM",
  },
  "dependencies": {
    "react": "^0.14.3",
    "react-addons-update": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "redux-logger": "^2.6.0",
    "redux-thunk": "^1.0.3",
  },
  "devDependencies": {
    "uglify-js": "~2.5.0",
    "babel-cli": "^6.1.1",
    "babel-eslint": "^5.0.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "browserify-shim": "~3.8.12",
    "clean-css": "~3.4.6",
    "eslint": "^2.2.0",
    "eslint-plugin-react": "^4.1.0",
  }
}

在我的项目中，我将react-redux与行import { createStore, applyMiddleware } from 'redux';一起使用，并添加了react-redux作为依赖项。当我编译我的项目时，它会产生一个大约20K行的javascript文件。

问题是，当我使用react-redux的cdnjs（https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.0/react-redux.js）shim react-redux并将其添加到browserify-shim配置时，我的项目仅使用大约2K行，并且react-redux js单独的文件只使用大约700行（并且该项目仍然有效！）。

为什么会这样？我可以不在browserify-shim中添加react-redux，但仍然只为我编译的项目javascript而不是18K行添加了700行吗？

这里真正发生了什么魔法，魔法如何实际起作用？

Answer 1

当您通过带有"global:react-redux"的CDN使用react-redux时，browserify-shim只是要求js包通过window调用已加载的全局变量。例如，在测试中，我运行的浏览器包只有八行。第一个是一个长行的browserify-shim样板，后七个完全按照我的描述进行：

(function (global){
(typeof window !== "undefined" ? window['$'] : typeof global !== "undefined" ? global['$'] : null);
(typeof window !== "undefined" ? window['react-redux'] : typeof global !== "undefined" ? global['react-redux'] : null);
(typeof window !== "undefined" ? window['react'] : typeof global !== "undefined" ? global['react'] : null);

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 
},{}]},{},[1]);

当你实际捆绑浏览器化软件包中的软件包时（意味着它们不是通过CDN加载的），软件包必须包含所有源代码。我用相同的软件包再次尝试了这个：jQuery，React和React-redux，而不是我的软件包中的七行，我有超过30,000行。这是有道理的，因为整个jQuery，React，React-redux包都包含在该包中。

如果没有看到完整的package.json和输出文件，就很难说出更多。希望它有所帮助！

使用Browserify / Webpack（ES6或CommonJS）填充javascript资源

1 个答案: