意外的令牌导入，babel-loader 不工作？

Posted

技术标签:

【中文标题】意外的令牌导入，babel-loader 不工作？【英文标题】：Unexpected Token Import, babel-loader not working? 【发布时间】：2018-06-06 10:06:54 【问题描述】：

./app/main.js 中的错误模块解析失败： /Users/dz2048/myapplication/app/main.js 第 1 行：Unexpected token You 可能需要适当的加载程序来处理这种文件类型。 |进口 从“反应”做出反应；

我无法弄清楚为什么我在运行 webpack-dev-server 时会收到此错误。 我看到很多人都收到了这个错误，但是出于不同的原因。 我怀疑 babel-loader 完全跳过而不是编译我的 main.js 文件。 第一次自己设置，我认为我很好地遵循了 webpack 文档，但我想不是。

依赖：

"dependencies": 
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "prop-types": "^15.6.0",
  "react": "^16.2.0",
  "react-redux": "^5.0.6",
  "redux": "^3.7.2",
  "seamless-immutable": "^7.1.2"
,
"devDependencies": 
  "babel-preset-env": "^1.6.1",
  "webpack": "^3.10.0"

webpack.config.dev.js：

const path = require('path');

module.exports = 
  entry: 
    main: './app/main.js'
  ,
  output: 
    filename: 'bundle.js',
    path: path.join(__dirname, '../public')
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        use: 
          loader: 'babel-loader',
          options: 
            presets: ['@babel/preset-env']
          
        
      
    ]
  
;

来自 package.json 的脚本

  "scripts": 
    "web-dev": "webpack-dev-server --config web/webpack/webpack.config.dev.js --colors"
  ,

最后，我的文件结构：

myapplication/
  app/
    main.js

  node_modules/
  web/
    public/
    webpack/
      webpack.config.dev.js
  package.json

web/public/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

【问题讨论】：

尝试在 .babelrc 文件中设置预设并将其从 webpack 配置文件中删除 @monssef - 谢谢。我试过了，结果是一样的。 你也可以添加你的html文件内容吗？ 已添加 将预设更改为 'babel-preset-env' 而不是 '@babel/preset-env' 【参考方案1】：

我发现了这个问题。 我在 package.json 中的脚本使用 webpack-dev-server 而不是 webpack。 适合我从我不完全理解的示例项目中复制代码。

【讨论】：

【参考方案2】：

把加载器部分改成这个

       
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        ,

我想你错过了这部分

resolve: 
    alias: 
        'react$': 'your react location',
        ...

【讨论】：

以上是关于意外的令牌导入，babel-loader 不工作？的主要内容，如果未能解决你的问题，请参考以下文章

UglifyJs意外令牌错误

为啥我在一个 webpack 项目上得到“意外的令牌导入”，而在另一个项目上却没有？

将 Quill 导入 React 应用程序会引发“未定义 React”、“意外的令牌导入”

Gulp、Vue、Webpack、Babel 和 Uncaught SyntaxError：意外的令牌导入

使用 vue-router 导入意外的令牌

开玩笑，意外的令牌导入