Question

我开始使用snabbdom技术。我用于项目的活页夹是webpack。当我尝试在node.JS（＆＃39; npm run build＆＃39;）上运行项目时，它显示了我的错误：

ERROR in ./app/main.js
Module parse failed: D:\User\webWorkspace\snabbdom\snabbwebpack\app\main.js Line
 3: Unexpected token
You may need an appropriate loader to handle this file type.
| "use strict";
|
| import snabbdom from 'snabbdom';
| import counter from './counter';
|

有人在这里知道如何在webpack.config.js文件中编写一个snabbdom加载器吗？

Answer 1

这不是snabbdom，而是ES2015语法。您需要babel-loader：

npm install --save-dev babel-loader babel-core

npm install babel-preset-es2015 --save-dev

echo '{ "presets": ["es2015"] }' > .babelrc

在webpack.config.js：

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
  ]
}

Answer 2

(\d{10}-\w{5})

Answer 3

{
  "name": "webpack-snabbdom",
  "version": "1.0.0",
  "description": "A small demo project that shows how to use webpack for client-side development",
  "scripts": {
    "watch": "webpack --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-cli": "^6.4.5",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-react-jsx": "^6.4.0",
    "babel-preset-es2015": "^6.3.13",
    "classnames": "^2.2.3",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.7.2",
    "snabbdom": "^0.3.1",
    "snabbdom-jsx": "^0.3.0",
    "style-loader": "^0.13.0",
    "watch": "^0.17.1",
    "webpack": "^1.12.12",
    "webpack-dev-middleware": "^1.5.1",
    "webpack-hot-middleware": "^2.6.4",
    "webpack-sources": "^0.1.0"
  },
  "dependencies": {
    "flyd": "^0.2.0",
    "snabbdom": "^0.2.8",
    "stats-webpack-plugin": "^0.3.0"
  }
}

Answer 4

我自己遇到了这个问题，并决定直接进入snabbdom-jsx目录以获取提示。一个预设的snabbdom-jsx的.babelrc，我没有，是"stage-2"预设。我把它放入中提琴！您的.babelrc应如下所示：

{ "presets": ["es2015", "stage-2", "react"] }

或者，虽然我没有尝试，但将以下内容放在Webpack配置中，

{test: /\.js?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'stage-2', 'react] } }

应该也可以。

总而言之，修改我的.babelrc为我修好了。编译器不再抱怨了，我现在正在享受snabbdom-jsx。

（不要忘记运行正确的npm-install，即npm install --save-dev babel-preset-stage-2）

如何在webpack.config.js中编写snabbdom加载器

4 个答案: