Настройте Webpack 4 с псевдонимами, Babel 7 для создания библиотеки компонентов React. - PullRequest
Новая
       7

Настройте Webpack 4 с псевдонимами, Babel 7 для создания библиотеки компонентов React.

0 голосов
/ 01 октября 2018

Я пытаюсь создать два проекта React:

  • Библиотека компонентов React (только компоненты без работающего приложения)

  • SPA-приложение, котороеиспользует созданные компоненты (примеры приложений)

Я хотел бы получить структуру папок, такую ​​как:

  • ./src - каталог с компонентами React
  • ./example - содержит приложение SPA, которое использует компоненты ./src

В каталоге примеров есть файлы конфигурации (простейшая конфигурация React + webpack без HMR и других вещей):

webpack.config.js 

const HtmlWebPackPlugin = require("html-webpack-plugin");
const aliases = require('./aliases.js');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  resolve: {
    alias: aliases
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

aliases.js 

var path = require('path');
module.exports = {
  'webpack-alias-react': path.resolve(__dirname, '../src')
};

babel.rc 

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

Конфигурация псевдонима VSCode находится в jsconfig.json файле.

И есть моя проблема.Если ./src/SimpleComponent содержит такой код: 

const SimpleComponent = () => {
  return 'string';
};

Запуск команды npm run build создает рабочее приложение.

Но когда ./src/SimpleComponent возвращает: 

const SimpleComponent = () => {
  return <div>abc</div>;
};

npm run buid исключение команды:

ОШИБКА в ../src/SimpleComponent.js Ошибка сборки модуля (из ./node_modules/babel-loader/lib/index.js): SyntaxError: D: \Tranzystor \ webpack-alias-реагировать \ src \ SimpleComponent.js: неожиданный токен (4: 9)

Как решить эту проблему с конфигурацией webpack / Babel?

Почему можно написать <div> в App.js?

Это правильный подход?

Весь код здесь доступен.

1 Ответ

0 голосов
/ 16 ноября 2018

Я решил, что проблемы с Babel 7 и расширенное решение для такого рода проблем есть: github

Он готов к использованию webpack 4 + React + Babel 7 + eslint конфигурации.

Это может быть полезно для решений монорепо.

Публикация вашей собственной библиотеки компонентов в npm может быть другим приложением.Как я упоминал выше, каталог ./src содержит небольшие реактивные компоненты (контент, который вы хотите опубликовать на npm).В каталоге ./demo есть приложение spa, которое показывает, как использовать поставляемые компоненты (например, сборник рассказов).

...