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

将babel-loader与preset for react一起使用，您可以导入和使用JSX脚本。

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

在 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

js错误：您可能需要一个合适的加载器

1 个答案: