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

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

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

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

Q&A

1回答

1876閲覧

webpack2 or 3への以降につきまして

退会済みユーザー

退会済みユーザー

総合スコア0

Babel

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

0グッド

0クリップ

投稿2017/08/31 08:23

gulpとbabelとwebpackを使ってフロントエンドの環境を構築しております。

ですが、先人の作成した環境を参考にしながらやったところ、webpackがver.1を扱っておりました。
私がインストールしたものがver.3.4.1で、下記のようなエラーが出てしまいました。
ちなみにですが、gulp(ver.3.9.1)、babel-loader(7.1.1)になります
webpack2への以降方法を教えていただけますと幸いです。

Module build failed: TypeError: fileSystem.statSync is not a function at module.exports (/Users/hoge/Documents/hogehoge/trunk/build-system/node_modules/babel-loader/lib/utils/exists.js:7:25) at find (/Users/hoge/Documents/hogehoge/trunk/build-system/node_modules/babel-loader/lib/resolve-rc.js:13:9) at Object.module.exports (/Users/hoge/Documents/hogehoge/trunk/build-system/node_modules/babel-loader/lib/index.js:113:132)

下記がwebpack.config.jsになります。

module.exports.webpackConfig = function(setting, target) { let config = (function() { let result = { entry: { index: target }, output: { filename: 'index.js' }, cache: true, progress: true, debug: (setting.MODE === 'DEBUG' || setting.MODE === 'DEBUG_LOCAL') ? true : false, devtool: (setting.MODE === 'DEBUG' || setting.MODE === 'DEBUG_LOCAL') ? '#inline-source-map' : null, module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel', query: { compact: false } } ] }, resolve: { modules: [ path.join(__dirname), path.join(__dirname, setting.APP_COMPONENTS), path.join(__dirname, setting.NODE_MODULES), ], modulesDirectories: [ setting.APP_COMPONENTS, setting.NODE_MODULES, ], extensions: ['', '.js'] }, resolveLoader: { modules: [ path.join(__dirname, setting.APP_COMPONENTS), path.join(__dirname, setting.NODE_MODULES), ] }, plugins: (function() { let result = []; if (setting.MODE === 'PRODUCTION') { Array.prototype.push.apply(result, [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') }, 'SETTING': JSON.stringify(setting) }), new webpack.optimize.DedupePlugin(), new webpack.optimize.AggressiveMergingPlugin(), new webpack.optimize.UglifyJsPlugin({ output: {comments: false} }), new webpack.optimize.OccurenceOrderPlugin() ]); } else { Array.prototype.push.apply(result, [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('development') }, 'SETTING': JSON.stringify(setting) }) ]); } return result; })() }; return result; })(); return config; }

また、moduleのところをwebpack2の書き方(rules,useなど)にしたところ、classなどがコンパイルされず、エラーも出ませんでした。

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

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

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

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

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

guest

回答1

0

ぐぐってみてもなにもわかりませんか?
もう少し詳しい情報が知りたいです
リンク内容

投稿2019/03/10 01:08

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問