0

在我的项目中

package.json（仅列出babel相关包）：

"@babel/core": "7.0.0-beta.37",
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.37",
"@babel/register": "7.0.0-beta.37",
"babel-eslint": "https://github.com/kesne/babel-eslint.git#patch-1",
"babel-helper-annotate-as-pure": "^7.0.0-beta.3",
"babel-loader": "^8.0.0-beta.0",
"babel-minify-webpack-plugin": "^0.2.0",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-class-properties": "^7.0.0-beta.3",
"babel-plugin-transform-decorators": "^7.0.0-beta.3",
"babel-plugin-transform-es2015-modules-commonjs": "^7.0.0-beta.3",
"babel-plugin-transform-es2015-template-literals": "^7.0.0-beta.3",
"babel-preset-typescript": "^7.0.0-alpha.19",

“webpack”：“^3.5.5”，“webpack-dev-server”：“^2.7.1”

npm 包“ui/base”是用ES 6. 我正在尝试将它导入到类似的页面上

import '@ui/base';.

package.json“用户界面/基地”。

"babel-core": "^6.26.0",
"babel-eslint": "^8.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babili-webpack-plugin": "^0.1.2",
"webpack-dev-server": "^2.7.1",
"webpack-node-externals": "^1.6.0"

包的构建版本在ui/base/target/package/@ui/base/0/Main.js

现在，在我的项目的构建过程中，我收到一条错误消息

ERROR in ./node_modules/@ui/base/src/components/accordion/Accordion.js
Module parse failed: Unexpected character '@' (18:0)
You may need an appropriate loader to handle this file type.
| import style from './accordion.css';
|
| @Define(`ui-base-v${__VERSION__}-accordion`, {
|   style,
| })

错误是从组件的源头抛出的。在项目的构建过程中没有采用包的构建版本。

我正在使用以下规则webpack来构建项目。

// Resolve imports to Typescript too without needing .ts
module.exports.resolve = {
  extensions: ['.js', '.ts'],
};

module.exports.rules = [
  {
    test: /\.(js|ts)$/,
    exclude: /node_modules/,
    use: [{
      loader: 'babel-loader',
    }],
  },
  {
    test: /\.html$/, // plugin to import HTML as a string
    use: [{
      loader: 'raw-loader',
      options: {
        exportAsEs6Default: true,
      },
    }],
  },
  {
    test: /\.(less|css)$/,
    use: [
      {
        loader: 'css-to-string-loader', // creates style nodes from JS strings
      },
      {
        loader: 'css-loader', // translates CSS into CommonJS,
        options: { url: false },
      },
      {
        loader: 'less-loader', // compiles Less to CSS
      }],
  },
];

下面是.babelrc在一个项目中。

function istanbulHacks() {
  return {
    inherits: require("babel-plugin-istanbul").default,
  };
}

const config = {
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-decorators",
    ["transform-class-properties", { "loose": true }],
    "transform-es2015-modules-commonjs",
    ["transform-es2015-template-literals", { "loose": true }],
  ],
  presets: [
    "typescript"
  ],
};

if (process.env.BABEL_ENV === "test") {
  config.auxiliaryCommentBefore = "istanbul ignore next";
  config.plugins.push(istanbulHacks);
}

module.exports = config;

不使用用 ES6 编写的包，一切正常。

更新

如果我将“主要”更改package.json为@ui/base

"main": "./target/package/@eui/base/0/Main.js",

然后它工作。实际上，“main”指向“./src/index.js”。

我在这里也很困惑。为什么“main”不指向包的构建版本？

如何解决这个问题？是否有任何版本与 babel 或 webpack 不兼容？为什么我没有得到用 ES6 编写的 npm 包的构建版本？

4

1 回答 1

0

几个选项：

  1. 我们确定导入是正确的吗？通常如果它的 npm，包中会有 es5 代码。我看到您的导入来自/@ui/base/src我看到 src 包含 es6 文件，而另一个目录包含转译后的 es5 代码，可能lib是dist. 你能检查node_modules文件夹看看里面有什么ui/base吗？

  2. 你可以告诉 webpack 去解析ui/base，现在你的 webpackexclude node_modules就好了，你也可以告诉 webpack 去includees6 代码。然后它将与您的源代码一起编译。

＃2的快速示例：

    include: [
      path.resolve(__dirname, "app")
    ],
    exclude: [
      path.resolve(__dirname, "app/demo-files")
    ],

https://webpack.js.org/configuration/

于 2018-03-12T22:57:13.810 回答