Могу ли я использовать ответ и бабел без веб-пакета?Или мне нужно все 3 в комбинации? - PullRequest
Новая
       5

Могу ли я использовать ответ и бабел без веб-пакета?Или мне нужно все 3 в комбинации?

0 голосов
/ 31 января 2019

Таким образом, я смог создать свою собственную среду для реагирования, используя webpack и babel, однако, когда я пытаюсь скопировать то, что я сделал, с помощью response и webpack, я получаю синтаксические ошибки в перенесенном коде для файла activjs.

Например, оператор «Требовать реагирования» в переданном файле завершается ошибкой.Есть идеи, почему это может произойти?Разве невозможно создать среду реагирования только с Babel, а не с веб-пакетом?

Заранее спасибо за любые ответы!

РЕДАКТИРОВАТЬ: Ниже приведены мои настройки только с Babel

Folder structure

файл babel.config.js 

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env", "@babel/preset-react"];


  return {
    presets
  };
}

файл responseTest.js ниже 

var React = require('react')
var ReactDOM = require('react-dom')



class App extends React.Component{
    render(){
        return(
            <div>test!</div>
            )
    }
}


ReactDOM.render(<App />, document.getElementById('app'))

package.json ниже 

{
  "name": "webpack-babel-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

Дайте мне знать, если вам нужно что-нибудь еще.Извините за поздний ответ готовил обед.

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Конечно можно.Просто выберите другой пакет.

Посылка - конфигурируемый с нуля пакет для обоих веб-узлов и узлов

Скопление - пакет для кода NodeJS в основном

Microbundle - упаковщик для крошечных модулей на основе Rollup

Browserify - require в браузере

0 голосов
/ 31 января 2019

Вы, вероятно, можете, хотя это может быть не так идеально для производства, как пакетирование с Webpack (или другим инструментом сборки), потому что вы будете выполнять перенос на стороне клиента, а не на стороне сервера, что может замедлить процесс.lot.

Если вы хотите использовать Babel без процесса сборки, вы должны согласиться с тем, что вы будете выполнять всю свою работу на стороне клиента.Процесс сборки (также известный как пакетный процесс) - это то, что позволяет вам визуализировать все «на стороне сервера» (на вашем компьютере или хост-сервере) перед отправкой кода клиенту (браузеру). Вот полезная статья о разработке без упаковщика. Без транспиляции браузер не сможет запустить ваш код, потому что он только запускает определенную разновидность JavaScript изначально (в настоящее время это базовая форма ES5 или, для безопасности,commonJS).

В документации Babel для @ babel / standalone говорится, что вы можете запустить Babel в браузере, очевидно, включив type="text/babel" в <script>тег, который вы используете для импорта компонента React в добавляемый им HTML-код. 

// Load Babel.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

// Load your React component with type set to "text/babel".
<script src="my_component.js" type="text/babel"></script>

Из @ babel / standalone документы: Note that config files don't work in @babel/standalone, as no file system access is available. The presets and/or plugins to use must be specified in the options passed to Babel.transform.

^^ Это означает, что вам придется запускать код с помощью метода Babel.transform() следующим образом: 

var myCode = 'const getMessage = () => "Hello World";';
var output = Babel.transform(myCode, { presets: ['es2015'] }).code;

Это говорит о том, что вам нужно обернуть все своиJS код в кавычках (чтобы сделать его гигантской строкой) и затем передать эту строку в метод Babel.transform(), который принимает два параметра: 1) ваш код и 2) вашу конфигурацию babel.Если вы спросите меня, это похоже на боль по сравнению с простым использованием упаковщика.

Это также означает, что вам не нужно включать Babel в ваши npm devDependencies, так как он не будет работать на вашем узлесреда, а в клиенте.Итак, поздравляем с удалением некоторых узловых модулей!

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

...