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

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

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

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

JavaScript

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

Q&A

解決済

1回答

9103閲覧

WebpackのCan't resolveがどうしても解消できない

ganariya

総合スコア50

Babel

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

JavaScript

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

0グッド

1クリップ

投稿2018/07/27 15:05

前提・実現したいこと

現在、Chromeの拡張機能の開発をしており、プロトタイプが完成したため、webpackやbabelできちんと大規模に作成できるように移行をしています。

ファイル構成

現在ファイル構成は、ルートディレクトリが

. ├── dist ├── index.js ├── node_modules ├── package-lock.json ├── package.json ├── src └── webpack.config.js

上記のようになっており、さらに、srcフォルダの中は

src. ├── components ├── htmls │   └── atcoder.html ├── images │   ├── large_icon.png │   └── small_icon.png ├── manifest.json ├── scripts │   ├── background │   │   └── icon_click.js │   ├── background.js │   ├── options │   ├── options.js │   ├── popup │   ├── popup.js │   └── third │   └── jquery-3.3.1.min.js └── styles

上記の様になっています。

webpackの設定

javascript

1const path = require('path'); 2const CopyWebpackPlugin = require('copy-webpack-plugin'); 3 4module.exports = { 5 entry: { 6 background: path.join(__dirname, 'src', 'scripts', 'background.js'), 7 popup: path.join(__dirname, 'src', 'scripts', 'popup.js'), 8 options: path.join(__dirname, 'src', 'scripts', 'options.js') 9 }, 10 output: { 11 path: path.join(__dirname, "dist"), 12 filename: 'scripts/[name].bundle.js', 13 }, 14 target: "web", 15 resolve: { 16 extensions: ['ts', '.js'], 17 modules: 18 [ 19 'node_modules', 20 path.resolve(__dirname, 'src') 21 ] 22 }, 23 devServer: { 24 contentBase: path.join(__dirname, 'dist'), 25 port: 26 9000, 27 hot: 28 true, 29 } 30 , 31 module: { 32 rules: [ 33 { 34 test: /.js$/, 35 use: {loader: 'babel-loader'} 36 } 37 ] 38 } 39 , 40 plugins: [ 41 new CopyWebpackPlugin( 42 [ 43 { 44 from: path.join(__dirname, 'src', 'manifest.json'), 45 to: path.join(__dirname, 'dist'), 46 }, 47 { 48 from: path.join(__dirname, 'src', 'htmls'), 49 to: path.join(__dirname, 'dist/htmls') 50 }, 51 { 52 from: path.join(__dirname, 'src', 'images'), 53 to: path.join(__dirname, 'dist/images') 54 }, 55 { 56 from: path.join(__dirname, 'src', 'components'), 57 to: path.join(__dirname, 'dist/components') 58 }, 59 { 60 from: path.join(__dirname, 'src', 'styles'), 61 to: path.join(__dirname, 'dist/styles') 62 } 63 ] 64 ) 65 ] 66} 67

package.jsonの設定

json

1{ 2 "name": "atcoder_save", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "build": "webpack --mode=development", 8 "start": "webpack --watch --mode=development" 9 }, 10 "author": "", 11 "license": "ISC", 12 "dependencies": { 13 "babel-core": "^6.26.3", 14 "babel-loader": "^7.1.5", 15 "babel-preset-env": "^1.7.0", 16 "copy-webpack-plugin": "^4.5.2", 17 "webpack": "^4.16.3", 18 "webpack-cli": "^3.1.0" 19 } 20} 21

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

src/scrpits/background.jsから、src/scripts/background/icon_click.jsを読み込もうと考えています。(background.jsがentryで、backgroundフォルダの中のソースコードが実際の実装。)

しかし、以下のようなエラーが表示されてしまいます。

ERROR in ./src/scripts/background.js Module not found: Error: Can't resolve 'background/icon_click' in '/Users/ganariya/Desktop/AtCoder_Save/src/scripts' @ ./src/scripts/background.js 3:15-47 npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! atcoder_save@1.0.0 build: `webpack --mode=development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the atcoder_save@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

webpackがなにかエラーをやらかしているのだと考えます。

該当のソースコード

background.js

javascript

1const {func} = require('background/icon_click'); 2func();

background/icon_click.js

javascript

1function func() { 2 console.log("func"); 3} 4 5module.exports.func = func;

試したこと

いろいろと、ネットを調べて、モジュールを最新にしたり、よくあるエラーミスを試したのですが、治すことができませんでした。

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

OS:Mac
IDE: WebStorm
フレームワーク: Webpack + babel + chrome extension

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

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

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

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

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

guest

回答1

0

ベストアンサー

require('background/icon_click')ではなくrequire('./background/icon_click')としてみてください。

投稿2018/07/27 16:25

karamarimo

総合スコア2553

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

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

ganariya

2018/07/27 23:28

ありがとうございます。ビルドがうまく通りました。 ちなみに、どうして、カレントディレクトリの表記を追加するとエラーが消えるのか教えていただけると幸いです。
karamarimo

2018/07/27 23:45

一般にnode.jsでは、標準ライブラリとnpmからインストールしたnode_modules内のモジュールは './' をつけずに指定し、それ以外のjsファイルは'./'か'/'か'../'から始めて指定する、というルールになっているようです。 https://nodejs.org/api/modules.html#modules_all_together Webpackはこの名前解決をjs上で独自のコードで行っていますが、だいたい同じルールに従っているはずです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問