Browserifyでrequireできない

Question

###実現したいこと
gulpでBrowserifyを使ってjqueryやvue.jsをimportしたいです。

###試してみた事

npm install --save jquery vue
npm install --save-dev browserify

package.jsonと明記しているjs(main.js)は下記です。

...<省略>
"dependencies": {
    "jquery": "^3.2.1",
    "vue": "^2.5.13"
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }

//main.js
import Vue from 'vue';
const $ = require('jquery');

new Vue({
  el: '#app',
  components: {}
});

/* babel変換後のjsファイルはこちら

'use strict';
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var $ = require('jquery');
new _vue2.default({
  el: '#app',
  components: {}
});

*/

main.jsに関してはbabelで変換しています。

importを使う方法、requireを使う方法、両方で明記してみましたが,
どちらも"Uncaught ReferenceError: require is not defined"になってしまいます。

Gulp初心者で恐縮ですが、どの記述が問題なのかわからず、ご教示いただけると幸いです。

よろしくお願いします。

Answer 1

Babelをかませた後、Browserifyで依存関係解決しないとダメですよ。
BabelはES2015+のコードをES5相当までダウングレードするだけのツールで、
BrowserifyはrequireをJavaScript世界にでっち上げるだけのツールですからね。

gulpでBrowserifyを使ってjqueryやvue.jsをimportしたいです

gulpはプロジェクトルートに設置したgulpfile.jsを愚直に実行してるだけなので、
gulpfile.jsを公開しないと何もアドバイス出来ませんよ！

gulpでやるなら下記のサイトを参考にしてください。

• gulp で browserify
• Gulp から Browserify を実行する
• React.js + Babel + Browserify + gulp の環境を作ってみた

babelify は Browserify 用の Babel 変換ライブラリです。自分的には ES6 で書く予定はまだ無いのですが、JSX の変換もやってくれるみたいなので採用しました。

そのものズバリなパッケージがありました。これ使えば楽勝ですね。

Comments

[mojao_0227]

頂いたパッケージで変換できました、ありがとうございました！