Устранение javascript-ресурсов с помощью Browserify/Webpack (ES6 или CommonJS)

Question

Как правильно отрегулировать javascript и без дополнительных файлов с помощью браузера или webpack?

Давайте рассмотрим пример использования реакции или реакции-сокращения. У меня есть такая конфигурация в 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", 
    } 
} 

В моем проекте, я использую реагировать-Redux с линией import { createStore, applyMiddleware } from 'redux';, и я добавил реагировать-перевождите как зависимость. Когда я скомпилировал свой проект, это приводит к одному файлу javascript, содержащему около 20 тыс. Строк.

Проблема заключается в том, что когда я выравниваю реакцию-редукцию, используя cdnjs (https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.0/react-redux.js) для реакции-редукта и добавляю его в конфигурацию прошивки браузера, мой проект использует только около 2K строк, а только файл response-redux js использует около 700 строк (и проект все еще работает!).

Почему это происходит? Могу ли я добавить add-redux в прокрутку браузера, но все же добавил только 700 строк в мой скомпилированный javascript проекта вместо строк 18K?

Какая магия на самом деле происходит здесь, и как действует волшебство?

Answer 1

Когда вы используете реакцию-редукцию через CDN с помощью "global:react-redux", browser-shim просто запрашивает js-пакет для вызова уже загруженной глобальной переменной через window. Например, в тесте, в котором я работал, у моего браузера был всего восемь строк. Первый browserify-прокладка шаблонный в одной длинной линии, а последние семь делают именно то, что я описал выше:

(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]); 

Когда вы на самом деле связать пакеты в browserified расслоении (это означает, что они не загружаются через CDN), пакет должен включать весь этот исходный код. Я попробовал это снова с теми же пакетами: jQuery, React и React-redux, а вместо семи строк в моем комплекте я получил более 30 000 строк. Это имеет смысл, потому что все пакеты jQuery, React, React-redux включены в этот пакет.

Без просмотра вашего полного package.json и выходных файлов было бы сложно сказать больше. Надеюсь, поможет!

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.