React，Webpacks和Babel：＆＃34;您可能需要一个合适的加载器来处理这种文件类型。＆＃34;

时间：2017-02-03 02:52:10

标签： parsing reactjs module webpack babel

我知道这是一个相当常见的错误，是配置文件中配置不当的结果。我搜索了一些帖子，但似乎找不到合适的解决方案。我确信这是在安装两个特定依赖项后引起的：babel-preset-es2015＆amp;＆amp;巴别预置反应。

我已尝试卸载/重新安装，但没有解决方法。

我正在关注this教程。

感谢您提前提供任何帮助。

错误代码为：

module.exports = {
entry: "./public/app.js",
output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
},
module: {
    loader: [
        {
            exclude: /(node_modules)/,
            loader: 'babel', 
            query: {
                    presets: ['es2015', 'react']
            }
        }
    ]
},
watch: true
}

Webpack.config.js 

import React from 'react'
import { render } from 'react-dom'

render(
    <div>
        <h1> Testing </h1>
    </div>,
    document.getElementById('app')
)

App.js 

  {
  "name": "ccjournal",
  "version": "1.0.0",
  "description": "Test Assignment",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.22.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "express": "^4.14.1",
    "pug": "^2.0.0-beta10",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "redux": "^3.6.0",
    "webpack": "^2.1.0-beta.22"
  }
}

打包Json 

jQuery(document).ready(function(){
        jQuery("#countryFilter, #stateFilter, #cityFilter, #customsFilter, #originalsFilter, #orderFilter").on("change",function(){
            var country = jQuery("#countryFilter").val().toLowerCase();
          var country = jQuery("#stateFilter").val().toLowerCase();
          var country = jQuery("#cityFilter").val().toLowerCase();
            var customs = jQuery("#customsFilter").is(":checked");
            var originals = jQuery("#originalsFilter").is(":checked");
            var order = jQuery("#orderFilter").is(":checked");

            var selector = "";
            if (country != "all") selector += ".filter-country-" + country;
            if (customs) selector += ".filter-customs";
            if (originals) selector += ".filter-originals";
            if (order) selector += ".filter-order";

            if (selector.length == 0)
                selector = ".LD_item_wrap";
            else
                selector = ".LD_item_wrap" + selector;

            jQuery(".LD_item_wrap").hide();
            jQuery(selector).show();
		});

        jQuery.getJSON("https://api.myjson.com/bins/it5hh.json", function(data){
            jQuery.each(data, function(i, field) {
                var name = field.NAME;
                var url = field.URL;
                var customs = field.CUSTOMS;
                var ones = field.ONE_OFFS;
                var originals = field.ORIGINAL_MODELS;
                var order = field.ORDER_ONLINE;
                var city = field.CITY;
                var state = field.STATE;
                var country = field.COUNTRY;
                var luthier = field.LUTHIER;
                var email = field.EMAIL;
                var tel = field.TEL;
                var store = field.STORE;
                var info = field.INFO;
                var specialty = field.SPECIALTY;
                var school = field.SCHOOL;
                var classString = "filter-country-" + country.toLowerCase();
                if (customs == "Yes") classString += " filter-customs";
                if (originals == "Yes") classString += " filter-originals";
                if (order == "Yes") classString += " filter-order";
    var uniqueElements = []

    function CheckIfExists(field) {
        var exists = false;
        jQuery.each(uniqueElements, function (i2, field2) {
            if (field2.COUNTRY == field.COUNTRY) {
                exists = true;
                return true;
            };
        });
        return exists;
    }

        jQuery.each(data, function (i, field) {
            if (!CheckIfExists(field)) {
                uniqueElements.push(field)
            }
        });
        jQuery('#countryFilter').empty();
        jQuery('#countryFilter').append(jQuery('<option>', {
                value : 'All',
                text : 'All'
            }))
        jQuery.each(uniqueElements, function (i, item) {
            jQuery('#countryFilter').append(jQuery('<option>', {
                    value : item.COUNTRY,
                    text : item.COUNTRY
                }));
        });
                jQuery("#show-data").append("<div class='LD_item_wrap " + classString + "'>  <div class='LD_1'><h3>" + name + "</h3></div><div class='LD_2'>" + "<a class='LD_lnk' rel='nofollow' href='" + url + "'" + "target='_blank'>" + url + "</a>" + "</div>  <div class='LD_lctn'><div class='LD_7'>" + city + "</div><div class='LD_8'>" + state + "</div><div class='LD_9'>" + country + "</div>  </div><div class='LD_3'>Custom Builds?<span>" + customs + "</span></div><div class='LD_4'>One-Offs?<span>" + ones + "</span></div><div class='LD_5'>Original Models?<span>" + originals + "</span></div><div class='LD_6'>Order Online?<span>" + order + "</span></div>  <div class='LD_cntct_div'>Contact Details</div>  <div class='LD_cnt_cnt'>  <div class='LD_10'><sup>Luthier</sup><span>" + luthier + "</span></div>    <div class='LD_11'><sup>Email</sup><span>" + "<a class='LD_MF' href='mailto:" + email + "' target='_top'>" + email + "</a></span>" + "</div><div class='LD_12'><sup>Tel</sup><span>" + tel + "</span></div> <div class='LD_13'><sup>Shop</sup><span>" + store + "</span></div>  <div class='LD_14'><sup>Info</sup><span>" + info + "</span></div>  <div class='LD_15'><sup>Specialty</sup><span>" + specialty + "</span></div><div class='LD_16'><sup>School/Course</sup><span>" + school + "</span></div></div></div>");
            });
            jQuery('.LD_MF').each(function() {
                var that = jQuery(this);
                that.attr('href', that.attr('href').replace('[x.x]', '.').replace('[x..x]', '@'));
                that.html(that.html().replace('[x.x]', '.').replace('[x..x]', '@'));
            });

            var check = jQuery('.LD_item_wrap div');
            for (var i = 0; i <= check.length; i++) {
                if (jQuery(check[i]).text() == '') {
                    jQuery(check[i]).css('display', 'none');
                }
            }


            var check3 = jQuery('.LD_item_wrap div span');
            var check2 = check3.parent();
            for (var i = 0; i <= check3.length; i++) {
                if (jQuery(check3[i]).text() == '') {
                    jQuery(check2[i]).css('display', 'none');
                }
            }

            var yn = jQuery('.LD_item_wrap div span');
            for (var i = 0; i <= yn.length; i++) {
                if (jQuery(yn[i]).text() == 'Yes') {
                    jQuery(yn[i]).html('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" width="15px" height="15px"><g><g><polygon points="293.333,135.04 190.08,240.213 137.173,187.093 108.8,215.467 192.213,298.667 326.187,168.747   " fill="#91DC5A"/></g></g><g><g><path d="M213.333,0C95.513,0,0,95.513,0,213.333s95.513,213.333,213.333,213.333s213.333-95.513,213.333-213.333    S331.154,0,213.333,0z M213.333,388.053c-96.495,0-174.72-78.225-174.72-174.72s78.225-174.72,174.72-174.72    c96.446,0.117,174.602,78.273,174.72,174.72C388.053,309.829,309.829,388.053,213.333,388.053z" fill="#91DC5A"/></g></g></svg>');
                }
            }

            for (var i = 0; i <= yn.length; i++) {
                if (jQuery(yn[i]).text() == 'No') {
                    jQuery(yn[i]).html('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" width="15px" height="15px"><g><g><polygon points="303.147,153.813 272.853,123.52 213.333,183.253 153.813,123.52 123.52,153.813 183.253,213.333 123.52,272.853     153.813,303.147 213.333,243.413 272.853,303.147 303.147,272.853 243.413,213.333   " fill="#666666"/></g></g><g><g><path d="M213.333,0C95.513,0,0,95.513,0,213.333s95.513,213.333,213.333,213.333s213.333-95.513,213.333-213.333    S331.154,0,213.333,0z M213.333,388.053c-96.495,0-174.72-78.225-174.72-174.72s78.225-174.72,174.72-174.72    c96.446,0.117,174.602,78.273,174.72,174.72C388.053,309.829,309.829,388.053,213.333,388.053z" fill="#666666"/></g></g></svg>');
                }
            }

            jQuery('.LD_14').hide();          
          jQuery('#LD_aSub').click(function(){
            jQuery('#LD_subWrap').fadeIn();
            jQuery('#show-data').hide();
          });
          jQuery('#LD_subExit').click(function(){
            jQuery('#LD_subWrap').fadeOut();
            jQuery('#show-data').show();
          });
        });
    });

0 个答案:

没有答案
相关问题
最新问题