代码之家 › 专栏 › 技术社区 › Sam

使用webpack4和babel为react创建导入模块的目录;无法识别html标记

webpack reactjs javascript

Sam · 技术社区 · 5 年前

我正在使用react、babel、webpack4和es6(或者es7)

问题

在我的react项目中,我编辑了webpack.config.js文件包含

  resolve: {
    extensions: ['.css', '.js', '.jsx'],
    alias: {
      Standard: '/Path/To/Standard',
    }
  }

import MyModule from 'Standard/MyModule.js'

当我这样做时,我的标准文件夹中的文件似乎无法识别html标记

错误消息

webpack-dev-server --inline

ERROR in /Path/To/Standard/MyModule.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Path/To/Standard/MyModule.js: Unexpected token (13:8)

  11 | var MyModule = (props) => {
  12 |     return (
> 13 |         <header id='Header' className={props.className}>

为了 webpack

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! default@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the default@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我试着创造一个webpack.config.js文件以及包.json在我的标准文件夹中(除了我的项目文件夹),但似乎没有什么真正的帮助

and is used on this answer in an older webpack version

  npm install --save react
  npm install --save babel @babel/cli @babel/core @babel/preset-env @babel/preset-react
  npm install --save babel-core babel-loader babel-cli babel-preset-env babel-preset-react webpack

而且看起来 this post 这是对 this blog 可能有关系,但这个解决方案对我不起作用。

{
    "scripts": {
        "webpack": "webpack",
        "start": "http-server"
    },
    "dependencies": {
        "react": "^16.8.6"
    },
    "devDependencies": {
        "@babel/cli": "^7.5.5",
        "@babel/core": "^7.5.5",
        "@babel/plugin-proposal-object-rest-spread": "^7.5.1",
        "@babel/polyfill": "^7.4.4",
        "@babel/preset-env": "^7.5.0",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.6",
        "webpack": "^4.28.0"
    }
}

webpack.config.js文件

var webpack = require('webpack');

const config = {
    mode: 'development',     // set mode option, 'development' or 'production'
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    },
    resolve: {
      extensions: ['.css', '.js', '.jsx'],
    }
}

module.exports = config;

巴别塔

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

0 回复 | 直到 5 年前

Nathan Braun 5 年前

这里的第一个问题是babel没有解析包中的代码(错误是它试图执行未传输的jsx代码)。

您可以尝试复制它们或直接在webpack配置中设置它们

                    {
                        loader : 'babel-loader',
                        options: {
                            presets       : [
                                ['@babel/preset-env',
                                    {// here the presets params
                                    }],
                                '@babel/preset-react'
                            ],
                            plugins       : [
                                ['@babel/plugin-proposal-class-properties', {
                                    "loose": true
                                }]
                            ]
                        }
                    },

     exclude: /(node_modules|bower_components)/,

因此可以使用这样的自定义函数:

     exclude: {test:(pathName)=>(isInternalCode(pathName))),

或者在reg exp中使用负前瞻,例如:

也就是说,通常的方法是独立编译您的包(通过从构建中外部化它们的所有dep,并将它们添加到“peerDependencies”或“dependencies”)

此外,还有一个插件,使“可继承”的软件包; layer-pack

使用它,您可以简单地将您的组件放在一个共享的可继承包中

有样品 here &文档(amp;D) here

希望有帮助:)