如何配置preact-compat,以便第三方React代码不会呈现为<undefined>?

时间:2019-04-11 21:01:11

标签: browserify babel preact

我想在我的preact应用程序中使用基于第三方React的软件包,所以我安装了preact-compat。我现在可以编写React组件了,但是根本没有编译第三方代码,而是渲染为。 Browserify或Babel跳过了第三方代码吗?

在Grunt文件中:

. . .
browserify: {
  options: {
    watch: true,
    transform: [['babelify', {
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        ['module-resolver', {
          'root': ['.'],
          'alias': {
            'react': 'preact-compat',
            'react-dom': 'preact-compat'
          }
        }],
        ['babel-plugin-jsx-pragmatic', { 'module': 'preact', 'import': 'h', 'export': 'h'}],
        ['@babel/plugin-transform-react-jsx', {pragma:'h'}]
      ],
    }]],
    browserifyOptions: {
      standalone: 'Viewer', // Set name of package as window global when no package system is present
      debug: true           // Enables Source Maps
    }
  },
  all: {
    options: {
      watch: true,          // Listen for incremental changes to files (fast incremental build)
    },
    files: {
      '../server/public/XXX': ['js/index.js'],
      '../server/public/XXX': ['js/viewer/viewer.js'],
      '../server/public/tests/XXX': ['tests/**/*.js'],
    }
  }
},
. . .

在.babelrc中:

    {
  "plugins": [
    ["module-resolver", {
    "root": ["."],
    "alias": {
        "react": "preact-compat",
        "react-dom": "preact-compat"
    }
    }],
    ["babel-plugin-jsx-pragmatic", { "module": "preact", "import": "h", "export": "h" }],
    ["@babel/plugin-transform-react-jsx", { "pragma": "h" }]
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

0 个答案:

没有答案