js错误：您可能需要适当的加载器

Question

我所做的只是导入一个npm包

import TimePicker from 'simple-timepicker-react'

render () {
    return (
      <div className='App'>
        <TimePicker />
      </div>
    )
  }

并且在启动Webapp时在终端中收到此错误。

./node_modules/simple-timepicker-react/src/SimpleTimePicker.js
Module parse failed: Unexpected token (194:6)
You may need an appropriate loader to handle this file type.
| 
|     return (
|       <div id="datetime-selector" style={{ width: containerWidth }}>
|         <div className="placeholderInput-wrap">
|           <input

那不是一个javascript文件吗？ 我需要哪种装载机？ 我不知道错误的含义。

Answer 1

React使用JavaScript的标记语法扩展名JSX 。 为了将该语法转换为有效的JS，您需要使用一些工具。 一种可行的方法是使用Webpack和Babel加载，转换和捆绑脚本。

将babel-loader与预设的React配合使用，可以导入并使用JSX脚本。

您可以使用React在此Webpack Demo项目中检查webpack-4配置。

---

在webpack.config.js和.babelrc文件中配置babel加载器：

module.exports = {
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    }
    // ...
};

.babelrc

{
    "presets": ["babel-preset-env", "babel-preset-react"]
}

DevDependencies ： babel-core ， babel-loader ， babel-preset-env ， babel-preset-react ， webpack ， webpack-cli