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",

＆＃34; webpack＆＃34;：＆＃34; ^ 3.5.5＆＃34;，＆＃34; webpack-dev-server＆＃34;：＆＃34; ^ 2.7.1＆＃34;

npm package＆＃34; ui / base＆＃34;写于ES 6。我试图在像

这样的页面上导入它

import '@ui/base';。

package.json＆＃34; ui / base＆＃34;。

"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编写的软件包的情况下，一切正常。

更新

如果我改变＆＃34;主要＆＃34;在package.json @ui/base到

的

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

java.lang.UnsupportedOperationException: Can't convert value at index 1 to color: type=0x5
              at android.content.res.TypedArray.getColor(TypedArray.java:463)

然后它的工作原理。实际上，＆＃34;主要＆＃34;指向＆＃34; ./ src / index.js＆＃34;。

我也很困惑。 为什么＆＃34;主要＆＃34;不是指向包的构建版本吗？

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

Answer 1

情侣选择：

我们确定导入是正确的吗？通常如果它的npm，包中会有es5代码。我看到您的导入来自/@ui/base/src我看到src包含es6文件，而另一个目录包含已编译的es5代码，可能是lib或dist。您可以查看node_modules文件夹，查看ui/base中的内容吗？
您可以告诉webpack解析ui/base，现在，您的网络包将exclude node_modules这很好，您也可以告诉webpack include es6码。然后它将与您的源代码一起被转换。

＃2的快速示例：

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

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

ES6中的npm包没有捆绑在webpack中

1 个答案: