web-dev-qa-db-ja.com

node_modulesからモジュールをインポートすると、BabelifyがParseErrorをスローします

Babelifyと Browserify を使用しています。また、ノードモジュールシステムごとにES6スタイルのモジュール機能を使用しています。

自分のすべてのモジュールをnode_modules/libsに入れたいです。

例えば：

test.js in node_modules/libs

export default () => {
  console.log('Hello');
};

main.js（bundle.jsにコンパイルされます）

import test from 'libs/test';

test();

その後、このコマンドで上記のコードをbundle.jsにコンパイルしました：

browserify -t babelify main.js -o bundle.js

しかし、残念ながら、私はいくつかのエラーがあります：

export default () => {
^

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

ディレクトリ構造：

[test]
  `-- node_modules
  │ `-- libs
  │  `-- test.js
  `-- main.js

しかし、次のようなnode_modulesにない独自のモジュールの場合：

[test]
  `-- libs
  │ `-- test.js
  `-- main.js

その後、正常に動作します。 node_modulesのbabelifyでES6スタイルモジュールを使用するにはどうすればよいですか？

javascriptnode.jsbrowserifyecmascript-6babeljs
32
Plusb Preco

これがBrowserifyトランスフォームの仕組みです。トランスフォームは、参照されているモジュールでのみ直接効果を持ちます。

Node_modulesのモジュールにトランスフォームが必要な場合は、そのモジュールにpackage.jsonを追加し、そのモジュールのトランスフォームとしてbabelifyを追加する必要があります。例えば.

"browserify": {
  "transform": [
    "babelify"
  ]
},

package.jsonに加えてbabelifyを依存関係として使用すると、browserifyにそのモジュール内の任意のファイルでbabelify変換を実行するよう指示します。

ただし、libsをnode_modulesのフォルダーにすることは、おそらく悪い考えです。通常、そのフォルダーには、真のスタンドアロンモジュールが含まれます。一般に、フォルダを他の場所で取得して再利用できない場合は、node_modulesに配置しないでください。

更新

最近リリースされたBabel v6では、コードに対して実行する変換を指定する必要もあります。そのためには、ルートディレクトリに.babelrcファイルを作成してBabelを構成することをお勧めします。

{
  "presets": ["es2015"]
}

そして

npm install --save-dev babel-preset-es2015
46
loganfsmyth

package.jsonフィールドのbrowserify.transformでsource transformsを指定できます。 module-deps readme のpackage.jsonでソース変換がどのように機能するかについての詳細があります。

ソース： https://github.com/substack/node-browserify#browserifytransform

例（my_batman_project/node_modules/test_robin_module/package.json）：

"browserify": {
  "transform": [
    "babelify"
  ]
},

browserify は構成を読み取り、指定された変換を自動的に実行します。

5
mate64

この問題は実際にはESLintに関連していると思います。

ESLint 2.0は、ES6モジュールを解釈するために必要なものを変更しました。 http://eslint.org/docs/user-guide/migrating-to-2.0.

ecmaFeatures構成オプションを変更し、次のようなものに置き換える必要があります。

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
4
Sean Anderson