0
我有一個.jsx文件，它在一個項目的webpack構建過程中不會產生任何錯誤。當我將其放在另一個項目中時，使用不同的webpack配置，現在會產生大量錯誤，其中大部分看起來像挑剔的語法錯誤，不應該影響文件是否能夠正常運行。Webpack/babel-loader在新項目中產生很多錯誤
有人知道爲什麼第二個項目會爲同一個文件產生很多錯誤嗎？我需要在webpack config或babel依賴關係中進行調整，以避免webpack爲諸如縮進之類的語法相關項目產生如此多的錯誤，以及我是否使用var vs let？
下面是一些錯誤的例子：
1:0 error Unexpected var, use let or const instead no-var
2:0 error Unexpected var, use let or const instead no-var
3:0 error Unexpected var, use let or const instead no-var
4:0 error Unexpected var, use let or const instead no-var
4:4 error LayoutStyles is defined but never used no-unused-vars
5:0 error Unexpected var, use let or const instead no-var
6:0 error Unexpected var, use let or const instead no-var
6:4 error LayoutSizes is defined but never used no-unused-vars
7:0 error Unexpected var, use let or const instead no-var
8:0 error Unexpected var, use let or const instead no-var
10:0 error Unexpected var, use let or const instead no-var
16:21 error Missing function expression name func-names
17:6 error Expected indentation of 6 characters indent
20:24 error Missing function expression name func-names
20:34 error Missing space before opening brace space-before-blocks
23:12 error Missing function expression name func-names
24:6 error Expected indentation of 6 characters indent
24:8 error Unexpected var, use let or const instead no-var
26:6 error Expected indentation of 6 characters indent
26:8 error Unexpected var, use let or const instead no-var
27:12 error Missing parentheses around multilines JSX react/wrap-multilines
27:59 error "optionStyle" used outside of binding context block-scoped-var
27:59 error optionStyle was used before it was defined no-use-before-define
27:85 error Missing function expression name func-names
27:95 error Missing space before opening brace space-before-blocks
27:118 error Missing semicolon semi
30:6 error Expected indentation of 6 characters indent
30:8 error Keyword "if" must be followed by whitespace space-after-keywords
30:27 error Expected '===' and instead saw '==' eqeqeq
30:41 error Missing space before opening brace space-before-blocks
31:8 error Expected indentation of 8 characters indent
32:16 error Missing parentheses around multilines JSX react/wrap-multilines
32:62 error "optionSelectedStyle" used outside of binding context block-scoped-var
33:33 error "selectedPinkStyle" used outside of binding context block-scoped-var
35:6 error Expected indentation of 6 characters indent
37:6 error Expected indentation of 6 characters indent
37:8 error Unexpected var, use let or const instead no-var
37:8 error All "var" declarations must be at the top of the function scope vars-on-top
37:26 error Trailing spaces not allowed no-trailing-spaces
38:12 error Missing parentheses around multilines JSX react/wrap-multilines
38:72 error optionStyle was used before it was defined no-use-before-define
38:72 error "optionStyle" used outside of binding context block-scoped-var
38:98 error Missing function expression name func-names
38:108 error Missing space before opening brace space-before-blocks
38:128 error Missing semicolon semi
40:29 error Missing semicolon semi
41:6 error Expected indentation of 6 characters indent
41:8 error Keyword "if" must be followed by whitespace space-after-keywords
41:27 error Expected '===' and instead saw '==' eqeqeq
41:38 error Missing space before opening brace space-before-blocks
42:8 error Expected indentation of 8 characters indent
42:26 error Trailing spaces not allowed no-trailing-spaces
43:16 error Missing parentheses around multilines JSX react/wrap-multilines
43:80 error "optionSelectedStyle" used outside of binding context block-scoped-var
44:33 error "optionIconSelectedStyle" used outside of binding context block-scoped-var
47:33 error "selectedPinkStyle" used outside of binding context block-scoped-var
48:46 error Trailing spaces not allowed no-trailing-spaces
49:6 error Expected indentation of 6 characters indent
51:6 error Expected indentation of 6 characters indent
51:8 error All "var" declarations must be at the top of the function scope vars-on-top
51:8 error Unexpected var, use let or const instead no-var
51:29 error Trailing spaces not allowed no-trailing-spaces
52:12 error Missing parentheses around multilines JSX react/wrap-multilines
52:75 error "optionStyle" used outside of binding context block-scoped-var
52:75 error optionStyle was used before it was defined no-use-before-define
52:101 error Missing function expression name func-names
52:111 error Missing space before opening brace space-before-blocks
52:134 error Missing semicolon semi
55:6 error Expected indentation of 6 characters indent
55:8 error Keyword "if" must be followed by whitespace space-after-keywords
55:27 error Expected '===' and instead saw '==' eqeqeq
55:41 error Missing space before opening brace space-before-blocks
56:8 error Expected indentation of 8 characters indent
57:16 error Missing parentheses around multilines JSX react/wrap-multilines
57:80 error "optionSelectedStyle" used outside of binding context block-scoped-var
58:33 error "optionIconSelectedStyle" used outside of binding context block-scoped-var
61:33 error "selectedPinkStyle" used outside of binding context block-scoped-var
62:58 error Trailing spaces not allowed no-trailing-spaces
63:6 error Expected indentation of 6 characters indent
65:6 error Expected indentation of 6 characters indent
65:8 error All "var" declarations must be at the top of the function scope vars-on-top
65:8 error Unexpected var, use let or const instead no-var
65:26 error Trailing spaces not allowed no-trailing-spaces
66:12 error Missing parentheses around multilines JSX react/wrap-multilines
66:72 error "optionStyle" used outside of binding context block-scoped-var
66:72 error optionStyle was used before it was defined no-use-before-define
66:98 error Missing function expression name func-names
66:108 error Missing space before opening brace space-before-blocks
66:128 error Missing semicolon semi
69:6 error Expected indentation of 6 characters indent
69:8 error Keyword "if" must be followed by whitespace space-after-keywords
69:27 error Expected '===' and instead saw '==' eqeqeq
69:38 error Missing space before opening brace space-before-blocks
70:8 error Expected indentation of 8 characters indent
70:26 error Trailing spaces not allowed no-trailing-spaces
71:16 error Missing parentheses around multilines JSX react/wrap-multilines
71:80 error "optionSelectedStyle" used outside of binding context block-scoped-var
72:33 error "optionIconSelectedStyle" used outside of binding context block-scoped-var
75:33 error "selectedPinkStyle" used outside of binding context block-scoped-var
77:6 error Expected indentation of 6 characters indent
79:6 error Expected indentation of 6 characters indent
79:8 error All "var" declarations must be at the top of the function scope vars-on-top
79:8 error Unexpected var, use let or const instead no-var
79:28 error Trailing spaces not allowed no-trailing-spaces
80:12 error Missing parentheses around multilines JSX react/wrap-multilines
80:74 error optionStyle was used before it was defined no-use-before-define
80:74 error "optionStyle" used outside of binding context block-scoped-var
80:100 error Missing function expression name func-names
80:110 error Missing space before opening brace space-before-blocks
80:132 error Missing semicolon semi
83:6 error Expected indentation of 6 characters indent
83:8 error Keyword "if" must be followed by whitespace space-after-keywords
83:27 error Expected '===' and instead saw '==' eqeqeq
83:40 error Missing space before opening brace space-before-blocks
84:8 error Expected indentation of 8 characters indent
84:28 error Trailing spaces not allowed no-trailing-spaces
85:16 error Missing parentheses around multilines JSX react/wrap-multilines
85:80 error "optionSelectedStyle" used outside of binding context block-scoped-var
86:33 error "optionIconSelectedStyle" used outside of binding context block-scoped-var
89:33 error "selectedPinkStyle" used outside of binding context block-scoped-var
91:6 error Expected indentation of 6 characters indent
93:6 error Expected indentation of 6 characters indent
93:8 error All "var" declarations must be at the top of the function scope vars-on-top
93:8 error Unexpected var, use let or const instead no-var
94:12 error Missing parentheses around multilines JSX react/wrap-multilines
94:72 error optionStyle was used before it was defined no-use-before-define
94:72 error "optionStyle" used outside of binding context block-scoped-var
94:98 error Missing function expression name func-names
94:108 error Missing space before opening brace space-before-blocks
94:128 error Missing semicolon semi
96:29 error Missing semicolon semi
97:6 error Expected indentation of 6 characters indent
97:8 error Keyword "if" must be followed by whitespace space-after-keywords
97:27 error Expected '===' and instead saw '==' eqeqeq
97:38 error Missing space before opening brace space-before-blocks
98:8 error Expected indentation of 8 characters indent
98:26 error Trailing spaces not allowed no-trailing-spaces
99:16 error Missing parentheses around multilines JSX react/wrap-multilines
99:80 error "optionSelectedStyle" used outside of binding context block-scoped-var
100:33 error "optionIconSelectedStyle" used outside of binding context block-scoped-var
103:33 error "selectedPinkStyle" used outside of binding context block-scoped-var
105:6 error Expected indentation of 6 characters indent
107:6 error Expected indentation of 6 characters indent
108:36 error modeStyle was used before it was defined no-use-before-define
108:36 error "modeStyle" used outside of binding context block-scoped-var
120:0 error Unexpected var, use let or const instead no-var
131:1 error Missing semicolon semi
133:0 error Unexpected var, use let or const instead no-var
144:1 error Missing semicolon semi
146:0 error Unexpected var, use let or const instead no-var
149:1 error Missing semicolon semi
151:0 error Unexpected var, use let or const instead no-var
152:12 error Missing space before value for key "display" key-spacing
153:13 error Missing space before value for key "position" key-spacing
154:10 error Missing space before value for key "width" key-spacing
159:0 error Unexpected var, use let or const instead no-var
159:4 error optionArrowDownSmall is defined but never used no-unused-vars
160:42 error Infix operators must be spaced space-infix-ops
161:1 error Missing semicolon semi
163:0 error Unexpected var, use let or const instead no-var
165:1 error Missing semicolon semi
這裏是我的項目的WebPack配置該文件不會產生錯誤：
'use strict';
var webpack = require('webpack');
module.exports = {
devtool: 'sourcemap',
entry: './app/index.js',
output: {
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: [
'babel'
]
},
{ test: /\.jsx$/, loaders: ['babel'] },
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpg|gif|otf|eot|svg|ttf|woff)$/,
loader: 'url-loader?limit=8192'
} // inline base64 URLs for <=8k images, direct URLs for the rest
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"root.jQuery": "jquery"
})
]
};
而且這些都是巴貝爾相關的依賴對於沒有錯誤的項目：
"babel": "^5.6.14",
"babel-core": "^5.6.15",
"babel-eslint": "^3.1.18",
"babel-jest": "^5.0.1",
"babel-loader": "^5.3.1",
"babel-plugin-object-assign": "^1.1.0",
"bundle-loader": "^0.5.4",
"babel-plugin-flow-comments": "^1.0.9",
這是webpack配置產生數百個錯誤的對同一文件的項目：
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var assetsPath = path.join(__dirname, "..", "public", "assets");
var publicPath = "assets/";
var commonLoaders = [
{
/*
* TC39 categorises proposals for babel in 4 stages
* Read more http://babeljs.io/docs/usage/experimental/
*/
test: /\.js$|\.jsx$/,
loader: "babel-loader?stage=0",
include: path.join(__dirname, "..", "app")
},
{
test: /\.(png|jpg|gif|otf|eot|svg|ttf|woff)$/,
loader: 'url-loader?limit=8192'
}, // inline base64 URLs for <=8k images, direct URLs for the rest
{ test: /\.html$/, loader: "html-loader" },
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{ test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css?module&localIdentName=[local]__[hash:base64:5]' +
'&sourceMap!sass?sourceMap&outputStyle=expanded' +
'&includePaths[]=' + (path.resolve(__dirname, '../node_modules')))
}
];
module.exports = [
{
// The configuration for the client
name: "browser",
/* The entry point of the bundle
* Entry points for multi page app could be more complex
* A good example of entry points would be:
* entry: {
* pageA: "./pageA",
* pageB: "./pageB",
* pageC: "./pageC",
* adminPageA: "./adminPageA",
* adminPageB: "./adminPageB",
* adminPageC: "./adminPageC"
* }
*
* We can then proceed to optimize what are the common chunks
* plugins: [
* new CommonsChunkPlugin("admin-commons.js", ["adminPageA", "adminPageB"]),
* new CommonsChunkPlugin("common.js", ["pageA", "pageB", "admin-commons.js"], 2),
* new CommonsChunkPlugin("c-commons.js", ["pageC", "adminPageC"]);
* ]
*/
context: path.join(__dirname, "..", "app"),
entry: {
app: "./client"
},
output: {
// The output directory as absolute path
path: assetsPath,
// The filename of the entry chunk as relative path inside the output.path directory
filename: "[name].js",
// The output path from the view of the Javascript
publicPath: publicPath
},
devtool: "source-map",
module: {
preLoaders: [{
test: /\.js$|\.jsx$/,
exclude: /node_modules/,
loaders: ["eslint"]
}],
loaders: commonLoaders
},
resolve: {
extensions: ['', '.react.js', '.js', '.jsx', '.scss'],
modulesDirectories: [
"app", "node_modules"
]
},
plugins: [
// extract inline css from modules into separate files
new ExtractTextPlugin("styles/main.css"),
new webpack.optimize.UglifyJsPlugin()
]
}, {
// The configuration for the server-side rendering
name: "server-side rendering",
context: path.join(__dirname, "..", "app"),
entry: {
app: "./server",
header: "./elements/Header"
},
target: "node",
output: {
// The output directory as absolute path
path: assetsPath,
// The filename of the entry chunk as relative path inside the output.path directory
filename: "[name].server.js",
// The output path from the view of the Javascript
publicPath: publicPath,
libraryTarget: "commonjs2"
},
externals: [
{
'alt/AltContainer': true,
'react/addons': true
},
/^[a-z\-0-9]+$/
],
module: {
loaders: commonLoaders
},
resolve: {
extensions: ['', '.react.js', '.js', '.jsx', '.scss'],
modulesDirectories: [
"app", "node_modules"
]
},
plugins: [
// extract inline css from modules into separate files
new ExtractTextPlugin("styles/main.css"),
new webpack.optimize.UglifyJsPlugin()
]
}
];
而這些都是在產生錯誤的項目巴貝爾依賴性：
"babel-core": "^5.5.4",
"babel-eslint": "^3.1.14",
"babel-loader": "^5.1.4",