val-zhang / webpack-demo Goto Github PK

pm ERR! Unexpected end of JSON input while parsing near '...480441473","size":100'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-09-19T09_16_09_203Z-debug.log

我在入口函数main.js里放了一个类
class Person{
static info = {
name: 'dd',
age: 20
}
}
2、安装了相应的Loader
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
3、在webpack.config.js里配置了module的rules

module: {//配置所有第三方Loader模块的
rules: [//第三方匹配规则
{ test: /.css$/, use: ['style-loader','css-loader'] },//处理css文件的loader
{ test: /.less$/, use: ['style-loader','css-loader','less-loader'] },//处理less文件的loader
{ test: /.scss$/, use: ['style-loader','css-loader','sass-loader'] },//处理scss文件的loader
{ test: /.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=244&name=[hash:8]-[name].[ext]' },
//处理scss文件的loader,limit是限制图片大小。如果图片大小大于或等于limit，不转为base64
{ test: /.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'}, //这是处理字体文件的配置
{
//cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//cnpm i babel-preset-env babel-preset-stage-0 -D
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}//这是配置babel，来转换高级ES6语法
]
}

运行npm run dev，提示错误
ERROR in ./src/main.js
Module build failed (from ./node_modules/_babel-loader@8.0.4@babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\00 projects\day6\01.webpack-study\node_modules\babel-preset-stage-0\lib\index.js

这是什么原因？

刚开始是跟着你的这篇webpack入门教程https://segmentfault.com/a/1190000006178770自己照着敲一遍，我用的是webstorm。然后敲的过程中会有些问题，我就自己上网搜索方法解决了，但是，按照教程顺序到了Babel这部分，我现在卡在这里了。因为我的localhost：8080这时候页面无法正常显示。以下是教程原文Babel部分我复制的（我知道有提到最新版更新，可是我是菜鸟刚入前端的坑，你这个github最新版的我也不知道是怎么搭建出来的啊~~~~~~）希望大佬能否搭救一下我啊！！！！万分感谢！期待大佬的回复！！
Babel
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

我们先来一次性安装这些依赖包

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack中配置Babel的方法如下:

module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
};
现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试，不过这次我们会使用React，记得先安装 React 和 React-DOM

npm install --save react react-dom
接下来我们使用ES6的语法，更新Greeter.js并返回一个React组件

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
render() {
return (

export default Greeter
修改main.js如下，使用ES6的模块定义和渲染Greeter模块

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(, document.getElementById('root'));
重新使用npm start打包，如果之前打开的本地服务器没有关闭，你应该可以在localhost:8080下看到与之前一样的内容，这说明react和es6被正常打包了。

为什么clone失败了呢
git -c filter.lfs.smudge= -c filter.lfs.required=false -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks clone --branch master https://github.com/Val-Zhang/webpack-demo.git E:\webpack-study\webpack-demo
Cloning into 'E:\webpack-study\webpack-demo'...
fatal: BUG: initial ref transaction called with existing refs

devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000
},
配置麻烦，建议在package.json里scripts里增加，示例如下：
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open --contentBase src --hot"
},