質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

340閲覧

Gulpタスク内でのBabelにてpluginsがうまく適用されない

takanakahiko

総合スコア10

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2017/11/17 20:38

###前提・やりたいこと

node.jsとその環境周りについて知見がないため,不適切な表現や質問があるかもしれませんが,ご了承ください.
質問内で間違った表現等あれば,極力指摘していただけると嬉しいです.

やりたいこととしては,babel-coreをGoogleAppsScriptで使えるように変換することです.
GoogleAppsScriptでは,.defaultというメンバへのアクセスをするとエラーになるため,["default"]とするように,Babelで変換したいです.
詳細はこちらにあります -> https://qiita.com/fossamagna/items/5d40a7946912e9efc346

###発生している問題・エラーメッセージ

以下のように,望んでいない.defaultといったアクセスが残っています.

dist/test.js

js

1//省略(79行目まで) 2exports.default = function (rawLines, lineNumber, colNumber) { 3//省略(81行目から)

以下のようになってくれるように,pluginsを適用している筈ですがうまくいきません.

dist/test.js

js

1//省略(79行目まで) 2exports["default"] = function (rawLines, lineNumber, colNumber) { 3//省略(81行目から)

###環境やソースコード

環境

bash

1$ ll 2total 152 3drwxrwxrwx 0 root root 512 Nov 18 04:48 ./ 4drwxrwxrwx 0 root root 512 Nov 18 01:53 ../ 5drwxrwxrwx 0 root root 512 Nov 18 03:42 dist/ 6-rwxrwxrwx 1 root root 747 Nov 18 05:10 gulpfile.babel.js* 7drwxrwxrwx 0 root root 512 Nov 18 04:48 node_modules/ 8-rwxrwxrwx 1 root root 838 Nov 18 05:10 package.json* 9-rwxrwxrwx 1 root root 146102 Nov 18 04:48 package-lock.json* 10drwxrwxrwx 0 root root 512 Nov 18 03:41 src/ 11 12$ node -v 13v8.9.0

package.json

json

1{ 2 "name": "node_test", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "babel": "^6.23.0", 14 "babel-core": "^6.26.0", 15 "babel-plugin-transform-es3-property-literals": "^6.22.0", 16 "babel-preset-env": "^1.6.1", 17 "babel-preset-es2015": "^6.24.1", 18 "babel-preset-gas": "^1.0.0", 19 "babel-preset-react": "^6.24.1", 20 "babel-register": "^6.24.0", 21 "babelify": "^8.0.0", 22 "browserify": "^14.3.0", 23 "chai": "^3.5.0", 24 "gasify": "^0.1.0", 25 "gulp": "^3.9.1", 26 "gulp-babel": "^6.1.2", 27 "gulp-exec": "^2.1.3", 28 "gulp-mocha": "^4.3.0", 29 "gulp-plumber": "^1.1.0", 30 "mocha": "^3.2.0", 31 "vinyl-source-stream": "^1.1.0" 32 } 33}

gulpfile.babel.js

js

1const gulp = require('gulp'); 2const browserify = require('browserify'); 3const source = require('vinyl-source-stream'); 4const babelify = require('babelify'); 5 6const compileFile = 'test.js'; 7 8gulp.task('dest', () => { 9 browserify({ 10 entries: ['src/'+compileFile] 11 }) 12 .transform('babelify', { 13 "presets": ["es2015"], 14 "plugins": [ //このプラグインで["default"]の形に変換できるみたい 15 "transform-es3-member-expression-literals", 16 "transform-es3-property-literals" 17 ] 18 }) 19 .plugin('gasify') 20 .bundle() 21 .on('error', function(err){ //ここからエラーだった時の記述 22 console.log(err.message); 23 console.log(err.stack); 24 }) 25 .pipe(source(compileFile)) 26 .pipe(gulp.dest('dist')); 27}); 28 29gulp.task('default', ['dest'], () => {});

src/test.js

js

1var babel = require("babel-core"); 2 3function load(){ 4 return babel; 5}

実行コマンド(?)

bash

1$ npx gulp

###補足情報(言語/FW/ツール等のバージョンなど)

  • windowsのbash(WSL)から実行しています.
  • anyenv と nodenv を使っています.
  • ほかに必要であれば情報を追記します

さいごに

あまりnodejsとその周辺技術に詳しくなく,ソースコードの貼り付けだけになってしまい,申し訳ありません.
宜しくお願いいたします.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

GoogleAppsScriptはよくわかりませんが、
コードにおかしい所があるのはわかりますね。

以下にQiitaの記事との差分を書いておきます。
一度exports -> exportに変更して再度試してみてください。

Qiitaの記事: export["default"] = {};
質問文のコード: exports["default"] = function (rawLines, lineNumber, colNumber) {

投稿2017/11/18 02:22

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問