teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問webpackでライブラリをまとめたjsファイルのconstをvarにする方法

編集履歴

質問編集履歴

5

OS情報を追加

2020/04/07 09:39

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -133,7 +133,7 @@
133
133
  const loader: PIXI.Loader = PIXI.Loader.shared;
134
134
  alert("load!");
135
135
  ```
136
-
136
+ Windowsで実施
137
137
  Node.jsのバージョン：
138
138
  v.10.10.0
139
139
  npmのバージョン：

4

ソースコードを変更

2020/04/07 09:39

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -20,7 +20,7 @@
20
20
  mode: "development",
21
21
 
22
22
  entry: {
23
- app: './src/ts/setup.ts',
23
+ app: './src/ts/index.ts',
24
24
  },
25
25
  output: {
26
26
  filename: '[name].js',

3

ソースコードを変更

2020/04/03 06:43

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -13,22 +13,25 @@
13
13
 
14
14
  ```js
15
15
  ■webpack.config.js
16
+ const path = require("path");
17
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
16
18
 
17
- const path = require('path');
18
- const webpack = require('webpack');
19
19
  module.exports = {
20
20
  mode: "development",
21
+
21
22
  entry: {
22
- app: './src/ts/index.ts',
23
+ app: './src/ts/setup.ts',
23
24
  },
24
25
  output: {
25
26
  filename: '[name].js',
26
27
  chunkFilename: 'vendor.js',
27
28
  path: path.join(__dirname, '/dist/js'),
28
29
  },
29
- resolve: {
30
+ module: {
31
+ rules: [{
30
- extensions: ['.js', '.ts'],
32
+ test: /.ts$/,
31
- modules: [path.resolve(__dirname, 'src'), 'node_modules']
33
+ use: "ts-loader"
34
+ }]
32
35
  },
33
36
  optimization: {
34
37
  splitChunks: {
@@ -39,37 +42,30 @@
39
42
  chunks: 'initial',
40
43
  enforce: true
41
44
  }
42
- }
45
+ },
46
+
43
47
  }
44
48
  },
45
- module: {
49
+ resolve: {
46
- rules: [{
47
- test: /.ts$/,
48
- exclude: /node_modules/,
50
+ extensions: [".ts", ".js"]
49
- loader: 'ts-loader',
50
- },
51
- {
52
- test: require.resolve('snapsvg/dist/snap.svg.js'),
53
- use: 'imports-loader?this=>window,fix=>module.exports=0',
54
- }
55
- ]
56
51
  },
57
- devtool: "source-map",
58
- plugins: [
59
- new webpack.optimize.OccurrenceOrderPlugin(),
60
- new webpack.optimize.AggressiveMergingPlugin(),
61
- ],
62
52
  devServer: {
53
+ disableHostCheck: true,
63
- contentBase: path.join(__dirname, 'dist/'),
54
+ contentBase: path.join(__dirname, "dist/"),
64
55
  compress: true,
65
56
  port: 8080,
66
- open: true,
57
+ open: true
67
- }
58
+ },
59
+ devtool: "source-map",
60
+ plugins: [
61
+ new HtmlWebpackPlugin({
62
+ template: "src/index.html"
63
+ })
64
+ ]
68
65
  };
69
66
  ```
70
67
  ```json
71
68
  ■tsconfig.json
72
-
73
69
  {
74
70
  "compilerOptions": {
75
71
  "target": "es5",
@@ -77,7 +73,6 @@
77
73
  "lib": ["dom", "es5"],
78
74
  "baseUrl": "./src/ts",
79
75
  "outDir": "./dist/js",
80
- "sourceMap": false,
81
76
  "allowJs": true,
82
77
  "alwaysStrict": true,
83
78
  "esModuleInterop": true,
@@ -103,116 +98,40 @@
103
98
  ],
104
99
  }
105
100
  ```
106
- ```
107
- ■.babelrc
108
-
109
- {
110
- "presets": [
111
- ["@babel/preset-env", {
112
- "modules": false
113
- }]
114
- ],
115
- "env": {
116
- "test": {
117
- "presets": [
118
- ["env", {
119
- "targets": {
120
- "node": "current"
121
- }
122
- }]
123
- ]
124
- }
125
- }
126
- }
127
- ```
128
101
  ```json
129
102
  ■package.json
130
-
131
103
  {
132
104
  "name": "sample",
133
105
  "version": "1.0.0",
134
- "description": "sample",
106
+ "description": "",
135
107
  "main": "index.js",
136
108
  "scripts": {
109
+ "test": "echo \"Error: no test specified\" && exit 1",
137
- "test": "jest",
110
+ "build": "webpack",
111
+ "start": "webpack-dev-server"
138
112
  },
139
- "jest": {
140
- "moduleFileExtensions": [
141
- "ts",
142
- "tsx",
143
- "js"
144
- ],
145
- "transform": {
146
- "^.+\.(ts|tsx)$": "ts-jest"
147
- },
148
- "globals": {
149
- "ts-jest": {
150
- "tsConfigFile": "tsconfig.json"
151
- }
152
- },
153
- "testMatch": [
154
- "**/test/*.+(ts|tsx|js)"
155
- ]
156
- },
157
113
  "author": "",
158
114
  "license": "ISC",
159
- "devDependencies": {
160
- "@babel/core": "^7.6.2",
161
- "@babel/preset-env": "^7.6.2",
162
- "@types/jest": "^25.1.3",
163
- "@typescript-eslint/eslint-plugin": "^2.25.0",
164
- "@typescript-eslint/parser": "^2.25.0",
165
- "babel-core": "^7.0.0-bridge.0",
166
- "babel-jest": "^24.9.0",
167
- "babel-loader": "^8.0.6",
168
- "babel-preset-env": "^1.7.0",
169
- "browser-sync": "^2.26.7",
170
- "eslint": "^6.8.0",
171
- "eslint-config-prettier": "^6.10.1",
172
- "eslint-plugin-prettier": "^3.1.2",
173
- "express": "^4.17.1",
174
- "gulp": "^4.0.2",
175
- "gulp-babel": "^8.0.0",
176
- "html-webpack-plugin": "^3.2.0",
177
- "imports-loader": "^0.8.0",
178
- "jest": "^24.9.0",
179
- "jest-useragent-mock": "0.0.3",
180
- "prettier": "^2.0.2",
181
- "ts-jest": "^25.2.1",
182
- "ts-loader": "^6.2.1",
183
- "typescript": "^3.8.2",
184
- "webpack": "^4.41.0",
185
- "webpack-cdn-plugin": "^3.2.2",
186
- "webpack-dev-server": "^3.8.2",
187
- "webpack-stream": "^5.2.1"
188
- },
189
115
  "dependencies": {
190
116
  "pixi.js": "^5.2.1"
117
+ },
118
+ "devDependencies": {
119
+ "html-loader": "^1.1.0",
120
+ "html-webpack-plugin": "^4.0.4",
121
+ "ts-loader": "^6.2.2",
122
+ "typescript": "^3.8.3",
123
+ "webpack": "^4.42.1",
124
+ "webpack-cli": "^3.3.11",
125
+ "webpack-dev-server": "^3.10.3"
191
126
  }
192
127
  }
193
128
  ```
194
129
 
195
- ```javascript
196
- ■gulpfile.js
197
- const gulp = require('gulp');
198
- const webpackStream = require("webpack-stream");
199
- const webpack = require("webpack");
200
- const webpackConfig = require("./webpack.config");
201
-
202
- gulp.task('bundle', () => {
203
- return webpackStream(webpackConfig, webpack)
204
- .pipe(gulp.dest('./dist/js'));
205
- });
206
-
207
- gulp.task('default', gulp.parallel('bundle'));
208
- ```
209
-
210
130
  ```typescript
211
131
  ■index.ts
212
-
213
132
  import * as PIXI from "pixi.js";
214
133
  const loader: PIXI.Loader = PIXI.Loader.shared;
215
- loader.load((loader: PIXI.Loader, resources: Partial<Record<string, PIXI.LoaderResource>>) => {alert("load!");});
134
+ alert("load!");
216
135
  ```
217
136
 
218
137
  Node.jsのバージョン：

2

Node.jsのバージョン情報を追加

2020/04/03 06:13

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -213,4 +213,9 @@
213
213
  import * as PIXI from "pixi.js";
214
214
  const loader: PIXI.Loader = PIXI.Loader.shared;
215
215
  loader.load((loader: PIXI.Loader, resources: Partial<Record<string, PIXI.LoaderResource>>) => {alert("load!");});
216
- ```
216
+ ```
217
+
218
+ Node.jsのバージョン：
219
+ v.10.10.0
220
+ npmのバージョン：
221
+ 6.4.1

1

ソースコードの追加

2020/04/02 03:06

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -187,13 +187,30 @@
187
187
  "webpack-stream": "^5.2.1"
188
188
  },
189
189
  "dependencies": {
190
- "@types/snapsvg": "^0.5.0",
191
- "axios": "^0.19.2",
192
- "pixi-layers": "^0.2.3",
193
- "pixi-projection": "^0.3.5",
194
- "pixi.js": "^5.2.1",
190
+ "pixi.js": "^5.2.1"
195
- "snapsvg": "^0.5.1",
196
- "snapsvg-cjs": "0.0.6"
197
191
  }
198
192
  }
193
+ ```
194
+
195
+ ```javascript
196
+ ■gulpfile.js
197
+ const gulp = require('gulp');
198
+ const webpackStream = require("webpack-stream");
199
+ const webpack = require("webpack");
200
+ const webpackConfig = require("./webpack.config");
201
+
202
+ gulp.task('bundle', () => {
203
+ return webpackStream(webpackConfig, webpack)
204
+ .pipe(gulp.dest('./dist/js'));
205
+ });
206
+
207
+ gulp.task('default', gulp.parallel('bundle'));
208
+ ```
209
+
210
+ ```typescript
211
+ ■index.ts
212
+
213
+ import * as PIXI from "pixi.js";
214
+ const loader: PIXI.Loader = PIXI.Loader.shared;
215
+ loader.load((loader: PIXI.Loader, resources: Partial<Record<string, PIXI.LoaderResource>>) => {alert("load!");});
199
216
  ```