0

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 を lineimport { createStore, applyMiddleware } from 'redux';で使用し、react-redux を依存関係として追加しました。プロジェクトをコンパイルすると、約 20K 行の 1 つの JavaScript ファイルになります。

問題は、react-redux の cdnjs ( https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.0/react-redux.js) を使用して react-redux をシムし、それを browserify-shim 構成に追加すると、私のプロジェクトは約 2K 行しか使用せず、react-redux js ファイルだけで約 700 行しか使用しないことです (そして、プロジェクトはまだ機能しています!)。

なぜそれが起こるのですか？browserify-shim に react-redux を追加することはできませんが、コンパイル済みプロジェクトの JavaScript に 18K 行ではなく 700 行しか追加できませんか?

ここで実際に起こっている魔法とは?

4

1 に答える 1

0

を使用して CDN を介して react-redux を使用する場合"global:react-redux"、browserify-shim は単に .js バンドルに、ロード済みのグローバル変数をwindow. たとえば、私が実行したテストでは、ブラウザー化されたバンドルには 8 行しかありませんでした。最初の 1 行は browserify-shim ボイラープレートで、1 行が長いです。最後の 7 行は、上で説明したこととまったく同じです。

(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) でこれを再試行したところ、バンドル内の 7 行ではなく、30,000 行を超えました。jQuery、React、React-redux パッケージ全体がそのバンドルに含まれているため、これは理にかなっています。

完全な出力ファイルを見なければ、package.jsonそれ以上のことを言うのは難しいでしょう. それが役に立てば幸い！

于 2016-03-08T14:55:39.720 に答える