ES6 中的 npm 包未捆绑在 webpack 中

Question

在我的项目中

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 of "ui/base"。

"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 编写的包，一切正常。

更新

如果我将@ui/base 的package.json 中的“main”更改为

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

然后就可以了。实际上，“main”是指向“./src/index.js”的。

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

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

Answer 1

几个选项：

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

1234563然后它将与您的源代码一起编译。

#2 的快速示例：

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

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