How to run

[neil-i]

在浏览器访问的时候，提示“Uncaught SyntaxError: Unexpected token *” 请教一下，这个库需要引入特殊的解释器么？

[Foveluy]

@neil-i Please provide more information.

For instance:

package.json //???
.babelrc //????

which would be helpful.

Thanks

[neil-i]

loaders: [ { test: /.js$/, exclude: [ /node_modules/, ], loader: "babel-loader", query: { presets:['react','es2015'] } }

这个是配置文件，还需要别的文件么？ 谢谢！

[Foveluy]

@neil-i

The easiest way to run this project is by using Create-react-app

if you want to run this project just for example,

you can do the following things

git clone https://github.com/215566435/Dragact.git
cd dragact 
npm install 
npm run dev

[neil-i]

我已经创建好了工程，并且成功运行并访问，但是引入 这个组件以后，提示了错误所以我想问下，是不是需要新的解释器或者编译器来支持您的组件

[Foveluy]

@neil-i 麻烦把你的

package.json //提供一下
webpack.config.js//提供一下

完全的贴进来吧。多谢

[neil-i]

package.json { "name": "jdirjf", "version": "1.0.0", "description": "jdirjf", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0", "build": "webpack --progress --colors --config webpack.config.product.js " }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.7.2", "babel-loader": "^6.2.4", "babel-plugin-react-transform": "^2.0.2", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "compression-webpack-plugin": "^0.4.0", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.0", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.28.0", "json-loader": "^0.5.4", "less": "^2.5.3", "less-loader": "^2.2.2", "react-hot-loader": "^1.3.0", "react-transform-hmr": "^1.0.4", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.0.0", "webpack-dev-server": "^1.14.1" }, "dependencies": { "dragact": "^0.2.3", "react": "^15.5.4", "react-dom": "^15.5.4", "react-mobile-datepicker": "^3.0.4", "react-router": "^3.0.2", "reactjs-iscroll": "^0.3.2" } }

webpack.config.js var path = require('path'); var webpack = require('webpack'); var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = { devtool: 'source-map', entry: [ 'webpack/hot/only-dev-server', APP_PATH + '/index.js' ], output: { path: BUILD_PATH, filename: 'bundle.js', }, module: { loaders: [ { test: /.js$/, exclude: [ /node_modules/, ], loader: "babel-loader", query: { presets:['react','es2015'] } }, { test: /.(png|jpg)$/, loader: "url?limit=40000" }, { test: /.less$/, loader: "style-loader!css-loader!less-loader" }, { test: /.css$/, loader: "style-loader!css-loader" }, { test: /.json$/, loader: "json-loader" } ] }, resolve:{ extensions:['','.js','.json'] }, devServer: { hot: true, inline: true, port : 8181 }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin(), new ExtractTextPlugin("bundle.css"), ] };

[Foveluy]

尝试删除

loader:
"babel-loader",
query: {
presets:['react','es2015']
}
},

根目录下添加一个.babelrc

// 新建.babelrc
{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    // webpack现在已经支持原生的import语句了, 并且将其运用在tree-shaking特性上
    "stage-2",
    // 规定JS运用的语言规范层级
    // Stage 2 是 "草案", 4 是 "已完成", 0 is "稻草人(strawman)"。
    // 详情查看 https://tc39.github.io/process-document/
    "react"
    // 转译React组件为JS代码
  ],
  "plugins": [
    "transform-runtime",
    "react-hot-loader/babel",
    "transform-object-rest-spread",
    "transform-react-jsx"
    // 开启react代码的模块热替换（HMR）
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    },
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

然后跑一下

[neil-i]

还是不行，有很多错误，我试着解决了几个，但是有库404 的问题，我想请教一下，您这个组件和其他的组件是有不一样的地方么，我在使用其他组件的时候，直接引入就可以使用了，为什么您这个不可以！ 新手小白，不吝赐教！

[Foveluy]

@neil-i

这样吧，你把代码发给我，除了node_module的全部发给我。

snakegear@163.com

[neil-i]

代码已经发送了！

[Foveluy]

@neil-i 几点建议

1. 你的webpack版本太低了，非常多的特性不支持，建议重新搭建
2. 推荐你实用react 16+版本
3. 推荐实用create-react-app构建版本

[neil-i]

嗯，我更新了 webpack，node，npm 现在可以用了 谢谢指点！

[Foveluy]

@neil-i

尽量追比较新版本的工具链