質問編集履歴

1 タイトル修正

chieeeeno

chieeeeno score 205

2017/04/19 01:56  投稿

webpack2 + ejsでビルドをした時に出るwarningについて
webpack2 + ejsでビルドをした時に出るwarningを消して、Electronアプリを作りたい
###発生している問題
webpack2 + ejsのパッケージを使ったコードをビルドした時に下記のようなWARNINGが発生していました。
そのWARNINGが直接の原因かわかりませんが、
Electronで上記のwebpackで変換したコードをpackage化したアプリを実行した時に以下のようなエラーになってしまいます
![イメージ説明](ceaca7939f4e35d36932179e613ec99a.png)
###エラーメッセージ
```
WARNING in ./~/ejs/lib/ejs.js
require.extensions is not supported by webpack. Use a loader instead.
@ ./src/main/fileGenerater.js 11:11-25
@ ./src/main/index.js
```
###該当のソースコード(fileGenerater.js)
```ここに言語を入力
import fs from 'fs';
import ejs from 'ejs';
import pretty from 'pretty';
/**
* ファイル生成を行う
* @param {Object} ファイルデータ
*/
function fileGenerater(param){
return new Promise(function(resolve, reject){
console.log( 'fileGenerater' );
let _htmlStr = '';
let templatePath = param.filePath;
let deployDirPath = param.deployDirPath;
let jsonFilePath = param.jsonFilePath;
let siteData;
fs.readFile(jsonFilePath, 'utf8', function(err, jsonData){
if (err) {
reject(err);
return;
}
siteData = JSON.parse(jsonData);
fs.readFile(templatePath, 'utf8', function(err, templateData){
if (err) {
reject(err);
return;
}
siteData.forEach(function(_data) {
_htmlStr = ejs.render(
templateData,
_data,
{ filename:'File'+_data.id }
);
fs.writeFile(`${deployDirPath}/${_data.id}.html`, pretty(_htmlStr));
});
resolve();
});
});
});
}
export default fileGenerater;
```
###webpack.config.js
```
module.exports = {
target: "electron",
node: {
__dirname: false,
__filename: false
},
resolve: {
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
entry: {
"main/index": "./src/main/index.js",
"renderer/app": "./src/renderer/app.jsx"
},
output: {
filename: "dist/js/[name].js"
}
};
```
###実現したいこと
0. 上記のWARNINGを消したい。
1. ビルドを成功させ、Electronアプリを実行できる形にしたい
###補足情報(言語/FW/ツール等のバージョンなど)
package.jsonは以下のような記述をしております。
「package-mac」及び、「package」のコマンドを実行した時に上記のような現象がおこります。
「package-win」のコマンドは現在手元にWindows環境が無いため実行はしておりません。
```
{
"name": "electron_chat",
"version": "1.0.0",
"description": "",
"main": ".tmp/main/index.js",
"scripts": {
"clean": "rimraf .tmp dist release",
"test": "eslint src/**/*.js src/**/*.jsx",
"compile": "babel --out-dir .tmp src",
"watch": "babel --watch --out-dir .tmp src",
"start": "electron .",
"copy:resources": "cpx \"prod_resources/**/*\" dist",
"copy:photon": "cpx \"node_modules/photon/dist/css/**/*\" dist/css && cpx \"node_modules/photon/dist/fonts/**/*\" dist/fonts",
"prebundle": "npm run copy:resources && npm run copy:photon",
"bundle": "webpack",
"package": "npm run bundle && electron-packager dist \"Electron Chat\" --all --out=release --icon=\"icon/icon\"",
"package-win": "npm run bundle && electron-packager dist \"Electron Chat\" pratform=win32 --arch=all --out=release --icon=\"icon/icon\"",
"package-mac": "npm run bundle && electron-packager dist \"Electron Chat\" pratform=darwin --arch=all --out=release --icon=\"icon/icon\""
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"photon": "github:connors/photon",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-dropzone": "^3.12.3",
"react-router": "3.0.0"
},
"devDependencies": {
"babel-cli": "6.18.0",
"babel-loader": "6.2.10",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"cpx": "1.3.1",
"ejs": "^2.5.6",
"electron": "1.6.1",
"electron-builder": "14.4.0",
"electron-builder-squirrel-windows": "13.10.1",
"electron-packager": "8.5.2",
"eslint": "3.1.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-react": "5.2.2",
"fs": "^0.0.1-security",
"pretty": "^1.0.0",
"rimraf": "2.5.3",
"webpack": "2.2.0"
},
"repository": {
"type": "git",
"url": "https://github.com/GH_USER_NAME/GH_REPO.git"
},
"build": {
"appId": "io.github.GH_USER_NAME.GH_REPO",
"win": {
"icon": "icon/icon.ico",
"target": [
"squirrel"
]
},
"squirrelWindows": {
"iconUrl": "https://github.com/GH_USER_NAME/GH_REPO/blob/master/icon/icon.ico?raw=true"
},
"mac": {
"icon": "icon/icon.icns",
"category": "public.app-category.social-networking"
},
"dmg": {
"icon": "icon/icon.icns",
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"directories": {
"app": "dist",
"output": "release"
}
}
}
```
  • JavaScript

    21025 questions

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

  • Node.js

    2428 questions

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

  • React.js

    1150 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • webpack

    337 questions

  • Electron

    244 questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る