如何解决JS 文件上的模块解析失败，意外令牌您可能需要适当的加载程序来处理此文件类型
我成功运行了 webpack 但 JS 文件不包含所有代码并且它在 JS 文件中包含此错误， 模块解析失败：C:\Users\bfayz\IdeaProjects\TRAC\frontend\script\vendor\jquery.min.js Unexpected token (1:0)\n您可能需要适当的加载程序来处理此文件类型。\n| ../../../bower_components/jquery/dist/jquery.min.js")}});
据说这可以在同事的 Mac 上运行，但不能在我的 PC 上运行。
我的 WEBPACK.CONfig.JS
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var output_path = path.join(__dirname,"src/main/webapp/resources");
var base_path = path.join(__dirname,"frontend/script/lib");
var vendor_path = path.resolve(base_path,"../vendor");
var style_path = path.join(__dirname,"frontend/scss");
var css_path = path.join(__dirname,"frontend/css");
var node_modules = path.join(__dirname,"node_modules");
module.exports = {
entry: {
// If adding an entry point here,remember to add it to the appropriate
// commons chunk plugin below.
order_queue: 'orders/list/index.jsx',subjects_list: 'subjects/list/main.jsx',order_add: 'orders/add/main.jsx',subject_detail: 'subjects/detail/main.jsx',common: 'common',frontsite: 'frontsite',frontsite_services: 'frontsite/services.js',measurements_upload: 'measurements/upload.jsx',subject_add: 'subjects/addsubject.jsx',study_add: 'studies/addstudy.jsx',user_list: 'users/list.js',user_add: 'users/adduser.jsx',group_add: 'groups/addgroup.jsx',studies_list: 'studies/list/main.jsx',study_detail: 'studies/details.jsx',study_charts: 'studies/charts.jsx',user_detail: 'users/details.js',group_detail: 'groups/details.js',billing_dashboard: 'billing/dashboard.js',notification_settings: 'notifications/settings.js',setting: 'settings/settings.js'
},output: {
path: output_path,publicPath: '/imaging/resources/',filename: '[name].js'
},module: {
rules: [
// The `include` part is necessary to avoid breaking things in node_modules.
// Note that there is a 'babelrc' file,but Webpack ignores it. Notably,// it lacks the 'modules: false' configuration,since for whatever reason
// Jest says not to use that.
{ test: /\.jsx?$/,loader: 'babel-loader',include: base_path,options: {
presets: [
// webpack understands the native import Syntax,and uses it for tree shaking
["es2015",{modules: false}],// Specifies what level of language features to activate.
// Stage 2 is "draft",4 is finished,0 is strawman.
// See https://tc39.github.io/process-document/
// "stage-2",// Transpile React components to JavaScript
"react",],plugins: [
// Transpile {...stuff} Syntax.
// Not in es6,should be in es7.
"transform-object-rest-spread",// Transpile arrow functions in class deFinitions.
// Makes React's new preferred Syntax much simpler.
["transform-class-properties",{ "spec": true }],}},{ test: /\.scss$/,use: ExtractTextPlugin.extract({
use: [
{ loader: "css-loader" },{ loader: "sass-loader",options: {
outputStyle: "expanded",includePaths: [
"./bower_components/foundation/scss"
]
}
}
]
})
},// Needed for markdown component.
{ test: /\.json$/,use: 'json-loader' },// Used for markdown reference.
{ test: /\.txt$/,use: 'raw-loader' },// Needed for the widgets
{ test: /\.css$/,use: ExtractTextPlugin.extract({ use: "css-loader" })},{ test: /\.(gif|png)$/,use: "url-loader" },{ test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,use: {
loader: "url-loader",options: { mimetype: "application/font-woff" },{ test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,use: {
loader: "file-loader",options: { name: "[name].[ext]" },]
},resolve: {
modules: [base_path,vendor_path,style_path,css_path,node_modules],alias: {
'jquery': path.join(vendor_path,'jquery.min.js'),},plugins: [
// Pull all internal common code into one file.
// This doesn't include frontsite code since there's no need for visitors
// to the frontsite to receive potentially megabytes of Javascript.
// Not to be confused with 'common.js',which is code for Foundation and
// the nav bar,common to all pages.
new webpack.optimize.CommonsChunkPlugin({
name: 'bundle',filename: 'bundle.js',minChunks: 2,chunks: [
'frontsite_services','order_queue','subjects_list','order_add','subject_detail','measurements_upload','subject_add','study_add','user_add','group_add','studies_list','study_detail','user_detail','group_detail',]
}),// There are may jQuery modules that don't kNow about Webpack.
// If this ever causes a conflict somewhere,it's possible to replace this with
// imports-loader,which works on a file-by-file basis.
new webpack.ProvidePlugin({
$: "jquery",jQuery: "jquery","window.jQuery": "jquery"
}),new ExtractTextPlugin({
filename: 'app.css',allChunks: true,}),devServer: {
proxy: {
"*": "http://localhost:8080"
}
},};
我的包裹.JSON
{
"name": "imaging","version": "0.0.0","description": "","main": "index.js","dependencies": {
"classnames": "^2.2.5","create-react-class": "^15.6.3","d3": "^4.9.1","immutable": "^3.8.1","lodash": "^4.17.15","markdown-it": "^8.3.1","moment": "^2.18.1","prop-types": "^15.5.8","rc-tooltip": "^3.4.3","react": "^15.5.4","react-dom": "^15.5.4","react-draggable": "^2.2.3","react-immutable-proptypes": "^2.1.0","react-modal": "^1.7.7","react-redux": "^5.0.4","react-widgets": "^3.4.6","redux": "^3.6.0","redux-logger": "^3.0.1","redux-thunk": "^2.2.0","reselect": "^3.0.0"
},"devDependencies": {
"babel-core": "^6.24.1","babel-jest": "^23.6.0","babel-loader": "^7.0.0","babel-plugin-Syntax-object-rest-spread": "^6.13.0","babel-plugin-transform-class-properties": "^6.24.1","babel-plugin-transform-object-rest-spread": "^6.23.0","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","css-loader": "^0.28.0","extract-text-webpack-plugin": "^2.1.0","file-loader": "^0.11.1","imports-loader": "^0.7.1","jest": "^23.6.0","node-sass": "^4.14.0","raw-loader": "^0.5.1","sass-loader": "^6.0.3","style-loader": "^0.16.1","url-loader": "^0.5.8","webpack": "^2.4.1","webpack-dev-server": "^2.11.5"
},"scripts": {
"test": "jest"
},"author": "","license": "BSD-2-Clause"
}
我的 .BABELRC
{
// Note that these settings apply to Jest,but are overridden by the settings in Webpack.
"presets": ["es2015","react"],plugins: [
"transform-object-rest-spread",["transform-class-properties",}
我有一个名为 /frontend/script/vendor/jquery.min.js 的文件，它似乎转发到另一个目录中的另一个 jquery.min.js 文件......\bower_components\jquery\dist\jquery .min.js
/frontend/script/vendor/jquery.min.js 的内容
"..\..\..\bower_components\jquery\dist\jquery.min.js"
我必须加双引号才能让 webpack 正确运行。 我运行 node_modules/.bin/webpack-dev-server --progress --port 8090 $* 构建 webpack
这里是我的一个 JS 文件的内容。您可以在文件 (billing_dashboard.js) 的末尾看到错误。
!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/imaging/resources/",n(n.s=663)}({663:function(e,n,t){"use strict";(function(e){e(function(){var n={"X-CSRF-TOKEN":csrftoken};e(".billing-checkBox").click(function(){var t=this.dataset,r=t.id,o=t.key,i=t.field,a=e(this).is(":checked");e.ajax("/imaging/billing/"+r+"/"+o+"/update",{method:"post",data:{field:i,value:a,csrftoken:csrftoken},headers:n,success:function(e){console.log("Success: ",e)},error:function(e){alert("Failed to update server. Try refreshing the page.")}})}),e("td.billing-cost").append('<a href="#">[+]</a>'),e(".billing-cost > a").click(function(n){n.preventDefault();var t=e(this),r=t.parent().parent().next();r.is(":visible")?(r.addClass("collapsed"),t.text("[+]")):(r.removeClass("collapsed"),t.text("[-]"))})})}).call(n,t(8))},8:function(e,n){throw new Error("Module parse Failed: C:\\Users\\bfayz\\IdeaProjects\\TRAC\\frontend\\script\\vendor\\jquery.min.js Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type.\n| ../../../bower_components/jquery/dist/jquery.min.js")}});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
