Можно ли использовать как «требовать», так и «импортировать» вместе с Webpack? - PullRequest
Новая
       12

Можно ли использовать как «требовать», так и «импортировать» вместе с Webpack?

0 голосов
/ 10 мая 2019

Нам пришлось обновить некоторые зависимости, чтобы переключиться на Webpack 4, и мы получаем предупреждение в webpack и ошибку в браузере при попытке смешать import и require в одном проекте.

Мыиметь очень большой проект (300+ файлов) с некоторыми файлами, использующими var Pkg = require('./fileName'); и module.exports = MyComponent, в то время как другие используют import Pkg from './fileName' и export default MyComponent и предпочли бы не проходить каждый из них, используя require/module.exports и обновите их.

предупреждение веб-пакета: 

WARNING in ./index.js 15:17-20
"export 'default' (imported as 'App') was not found in './App.jsx'

ошибка браузера: 

App.jsx:20 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (App.jsx:20)
    at eval (App.jsx:21)
    at Module../App.jsx (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at eval (index.js:2)
    at Module../index.js (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

версии зависимостей package.json: 

"@babel/cli": "^7.2.3",
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",

.babelrc 

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}

.browserlistrc 

{
  "browserslist": [
      ">0.25%",
      "ie 11",
      "not op_mini all"
  ]
}

конфиги webpack: 

rules: [
    {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [{
            loader: 'babel-loader',
            options: {
                babelrc: true
            }
        }],
    },
    // some other rules...   
]

index.js 

import App from './App'

// Expose App to the window so we can utilize 
// it from within <script> tags
window.App = App

App.js 

import React from 'react'
import ReactDOM from 'react-dom'

var App = (function () {
    return {
        route: function (route, properties) {
            return ReactDOM.render(
                <div>component markup</div>, document.getElementById('workspace')
            )
        }
    }
})()

// This works
// export default App

// This breaks
module.exports = App

index.html 

<script>
    App.route('login', {some: 'props'});
</script>

1 Ответ

2 голосов
/ 10 мая 2019

Технически веб-пакет будет упакован (но выдает предупреждение, как вы видите там). Тем не менее, мы в команде webpack предлагаем вам ограничить количество синтаксиса CommonJS, используемого в вашей кодовой базе, как можно меньшим.

Почему?Потому что CommonJS не является статически анализируемым во многих крайних случаях, и поэтому «выручает» от оптимизаций, таких как встряхивание дерева и поднятие области видимости.Это означает, что ваш JavaScript (самый дорогой ресурс на вашем сайте для загрузки) будет содержать все виды мертвого / неиспользованного кода.

В нашей документации веб-пакета вы можете наблюдать перечислил отказы по оптимизации , и вы заметите, что один из них "использует CommonJS" или "модульные" символы в вашем коде.

В долгосрочной перспективе это окажет значительное негативное влияние на производительность вашего приложения!

Если миграция действительно болезненна, я бы посмотрел на кодовый модуль, который будет работать с вашим кодом, и для преобразования требуются(где это возможно) на импорт!

...