javascript - js错误: You may need an appropriate loader

Question

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

import TimePicker from 'simple-timepicker-react'

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

启动我的网络应用程序时，我的终端出现了这个错误。

./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 使用名为 JSX 的 JavaScript 标签语法扩展. 为了将该语法转换为有效的 JS，您需要使用一些工具。 一种可能的方法是使用 Webpack和 Babel加载、转换和捆绑您的脚本。

使用 babel-loader用preset for react您可以导入和使用 JSX 脚本。

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

---

在 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