結論
外部依存させる場合はこう書く。
webpack.config.jsのexternals
externals: [
{
_: true,
jQuery: true
}
]
注意！！！！！
公式のサンプルにある a と b しか試してません。
公式のexternalsの説明
エントリーポイントとなるファイルが複数欲しいので、ライブラリ系のファイルを外部依存としたかった（前に外部依存にせずにやった事があるが、ビルドするのがめちゃくちゃ遅かった）。
externalsに指定すれば良さそうだったので公式を確認。
公式に書いてあるeternalsの指定例
{
output: { libraryTarget: "commonjs" },
externals: [
{
a: false, // a is not external
b: true, // b is external (require("b"))
"./c": "c", // "./c" is external (require("c"))
"./d": "var d" // "./d" is external (d)
},
// Every non-relative module is external
// abc -> require("abc")
/^[a-z\-0-9]+$/,
function(context, request, callback) {
// Every module prefixed with "global-" becomes external
// "global-abc" -> abc
if(/^global-/.test(request))
return callback(null, "var " + request.substr(7));
callback();
},
"./e" // "./e" is external (require("./e"))
]
}
よく分からん...
環境とか設定とか
package.json
package.json
{
"name": "lifegame",
"version": "1.0.0",
"description": "ライフゲームを書いてみる",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/youkaiantena/lifegame.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/youkaiantena/lifegame/issues"
},
"homepage": "https://github.com/youkaiantena/lifegame#readme",
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-webpack": "^1.5.0",
"lodash": "^4.8.2",
"webpack": "^1.12.14",
"webpack-stream": "^3.1.0"
}
}
gulpfile.babel.js
gulpfile.babel.js
'use strict'
import gulp from 'gulp'
import webpack from 'webpack-stream'
import config from './webpack.config.js'
gulp.task('build', () => {
return gulp.src('')
.pipe(webpack(config()))
.pipe(gulp.dest('./dest'))
})
webpack.config.js
const exports = () => {
return {
cache: true,
entry: {
'test': './src/test.js'
},
output: {
filename: "[name]/app.js"
},
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
},
externals: {
}
}
}
export default exports
src/test.js
src/test.js
// ここでimportとかやってみる
dest/test/app.js
ビルドされたらこの名前で吐き出される様にしてある
test.html
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lifegametest</title>
</head>
<body>
<!-- 外部依存のファイルはここで読み込むよ -->
<script src="./dest/test/app.js"></script>
</body>
</html>
いざ実践
lodashで試す
src/test.js
import _ from 'lodash'
console.log(_.isUndefined)
a: false, // a is not external
lodashって指定してみる
webpack.config.jsのexternals
externals: [
{
lodash: false
}
]
結果
- ビルド通った
-
console.log(_.isUndefined)も問題なし
_って指定してみる
webpack.config.jsのexternals
externals: [
{
_: false
}
]
結果
- ビルド通った
-
console.log(_.isUndefined)も問題なし
結論
外部依存させない場合、lodashって指定しようが_って指定しようが特に問題なし。
分かりやすい方で書けば良さそう。
b: true, // b is external (require("b"))
htmlで、下記を読みこませる
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.8.2/lodash.min.js"></script>
lodashって指定してみる
webpack.config.jsのexternals
externals: [
{
lodash: true
}
]
結果
- ビルド通った
-
console.log(_.isUndefined)を呼び出してる箇所で、lodashなんて知らないって叱られる。 app.js:67 Uncaught ReferenceError: lodash is not defined
_って指定してみる
webpack.config.jsのexternals
externals: [
{
_: true
}
]
結果
- ビルド通った
-
console.log(_.isUndefined)も問題なし
結論
外部依存させる場合、_って指定しないとエラー発生。
なぜなら、lodashなんてオブジェクトは存在しないから。
おまけ
jQueryを外部依存にする場合は $: trueって指定すると$なんて知らねってエラーがビルド時に発生する。
外部依存しない場合は試してないので分かりません。