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「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 で書かれたパッケージを使用しなくても、すべて正常に動作します。

アップデート

「メイン」package.jsonを@ui/base～に変更すると

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

それは動作します。実は「main」は「./src/index.js」へのポイントです。

ここでも迷っています。"main" がパッケージのビルド バージョンを指していないのはなぜですか?

この問題を解決するには? babel または webpack とのバージョンの非互換性はありますか? ES6 で書かれた npm パッケージのビルド バージョンを取得できないのはなぜですか?

4

1 に答える 1