Unabe для настройки веб-пакета - PullRequest
Новая
       27

Unabe для настройки веб-пакета

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

Я весь день бился головой о стену, пытаясь понять это. Я пытаюсь настроить webpack для генерации bundle.js, но сталкиваюсь с проблемами с загрузчиком 

ERROR in ./src/app.js 12:22
Module parse failed: Unexpected token (12:22)
You may need an appropriate loader to handle this file type.
| // addLocaleData(arLocaleData);
| // addLocaleData(esLocaleData);
> const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
| 
| // Containers

Вот мой соответствующий app.js 

```import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';
import store from './store/Reducer';
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;

// Containers
const DefaultLayout = Loadable({
  loader: () => import('./containers/DefaultLayout'),
  loading
});

// Pages
const Login = Loadable({
  loader: () => import('./views/Pages/Login'),
  loading
}); 

const Portal = Loadable({
  loader: () => import('./views/Pages/Portal'),
  loading
});

const Register = Loadable({
  loader: () => import('./views/Pages/Register'),
  loading
});

const Page404 = Loadable({
  loader: () => import('./views/Pages/Page404'),
  loading
});

const Page500 = Loadable({
  loader: () => import('./views/Pages/Page500'),
  loading
});

class App extends Component {

  constructor(props){
    super(props);
    store.subscribe(() => this.forceUpdate());
  }

  render() {
    // const locale = window.location.search.replace("?locale=","") || "en";
    // const messages = translations[locale]
    return (
      //<IntlProvider locale={locale} key={locale} messages={messages}>
      <HashRouter>
          <Switch>
            <Route exact path="/login" name="Login Page" component={Login} />
           <Route  path="#/portal" name="Portal Page" component={Portal} />
            <Route exact path="/register" name="Register Page" component={Register} />
            <Route exact path="/404" name="Page 404" component={Page404} />
            <Route exact path="/500" name="Page 500" component={Page500} />
            <Route path="/" name="Home" component={DefaultLayout} />
          </Switch>
      </HashRouter>
      //</IntlProvider>
    );
  }
}

export default App;

и web pack.config.js: 

const path = require('path');

module.exports = {
    entry:  "./src/app.js",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [{
        test: /\.js$/, // include .js files
        enforce: "pre", // preload the jshint loader
        exclude: /node_modules/, // exclude any and all files in the `node_modules folder`
        use: [{
          loader: "jshint-loader",
          // more options in the optional jshint object
          options: {  // ⬅ formally jshint property
            camelcase: true,
            emitErrors: false,
            failOnHint: false
          }
        }]
      }]
    },
  };

и затем запуск веб-пакета из командной строки.

Я что-то упускаю здесь очевидное?

1 Ответ

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

Обязательно установите babel-preset-es2015, используя 

npm i babel-preset-es2015

Сначала вам нужно создать файл .babelrc 

{
  "presets": ["es2015", "react"],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

Затем вам нужно будет установить пакет 

npm install --save-dev babel-plugin-transform-class-properties

Затем в вашем загрузчике добавьте babel-loader вот так

Измените это 

loader: "jshint-loader",

на это 

{
    loader: ["babel-loader", "jshint-loader"]
},
...