0
私はBrowserifyでJSにバンドルされた依存関係のために恐ろしい遅いビルドを整理しようと必死にしてきました。 externalLibsがCDNロードすることになっていると、完全に除外されている未知のエラー：Browserify Gulpでモジュールを見つけることができません
const paths = require("./paths.gulpfile")
const gulp = require("gulp")
const uglify = require("gulp-uglify")
const sourcemaps = require("gulp-sourcemaps")
const browserify = require("browserify")
const shim = require("browserify-shim")
const watchify = require("watchify")
const babelify = require("babelify")
const source = require("vinyl-source-stream")
const buffer = require("vinyl-buffer")
const gutil = require("gulp-util")
const babel = require("gulp-babel")
const externalLibs = [
"jquery",
"react",
"react-dom",
"prop-types",
"bootstrap-sass"
]
const ignoredLibs = []
const vendorLibs = [
"google-maps",
"history", "history/createBrowserHistory",
"lodash", "lodash/debounce",
"path-to-regexp"
]
/**
* JS related gulp tasks
*
* @returns {object} utility functions for JS based gulp tasks.
*/
module.exports = function(compiledName) {
/**
* Bundle definition for dev.
*
* @param {object} bundler
* @returns A bundle.
*/
const appBundle = function(bundler) {
return bundler.bundle()
.pipe(source(compiledName + ".js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(babel())
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(paths.scriptsBuildPath))
}
/**
* Bundle definition for production.
*
* @param {object} bundler
* @returns A bundle.
*/
const appMinBundle = function(bundler) {
return bundler.bundle()
.pipe(source(compiledName + ".min.js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(babel())
.pipe(uglify({
compress: true,
mangle: {
except: [
"$",
"createBrowserHistory",
"debounce",
"GoogleMapsLoader",
"history",
"jQuery",
"lodash",
"PropTypes",
"React",
"ReactDom",
"toRegex"
]
}
}))
.on("error", gutil.log)
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(paths.scriptsBuildPath))
}
/**
* Bundle definition for vendors.
*
* @param {object} bundler The browserify instance
* @param {string} env The environment
* @returns A bundle.
*/
const vendorsBundle = function(bundler, env) {
// eslint-disable-next-line
process.env.NODE_ENV = env ? env : process.env.NODE_ENV
return bundler.bundle()
.pipe(source("vendors.js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(paths.scriptsBuildPath))
}
/**
* Minified Bundle definition for vendors.
*
* @param {object} bundler The browserify instance
* @param {string} env The environment
* @returns A bundle.
*/
const vendorsMinBundle = function(bundler, env) {
// eslint-disable-next-line
process.env.NODE_ENV = env ? env : process.env.NODE_ENV
return bundler
.transform("uglifyify", { global: true })
.bundle()
.pipe(source("vendors.min.js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify({
compress: true,
mangle: true
}))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(paths.scriptsBuildPath))
}
/**
* Builds the JavaScript bundles.
*
* @param {bool} debugMode
* @param {bool} watch
* @param {func} bundleCallback
* @returns A bundle.
*/
const buildJs = function(debugMode, watch, bundleCallback) {
const entryPoint = paths.scriptsSrcPath + "app.js"
let bundler = browserify({
entries: [entryPoint],
transform: [[babelify, { "presets": ["react", "es2015", "stage-0"] }], shim],
debug: debugMode,
cache: {}, packageCache: {}, fullPaths: true
})
bundler.external(externalLibs)
bundler.external(vendorLibs)
ignoredLibs.forEach(function(lib) {
bundler.ignore(require.resolve(lib, { expose: lib }))
})
if (watch) {
bundler = watchify(bundler)
bundler.on("update", function() {
bundleCallback(bundler)
})
bundler.on("log", function(msg) {
gutil.log(msg)
})
}
return bundleCallback(bundler)
}
/**
* Builds the JavaScript vendor bundle.
*
* @param {string} env The environment
* @returns A bundle.
*/
const buildVendorJs = function(env) {
const bundler = browserify({
debug: true
})
//bundler.external(externalLibs)
vendorLibs.forEach(function(lib) {
bundler.require(lib)
})
const bigBundle = vendorsBundle(bundler, env)
return env == "production" ? vendorsMinBundle(bundler, env) : bigBundle
}
return {
buildJs : buildJs,
buildVendorJs: buildVendorJs,
appBundle: appBundle,
appMinBundle: appMinBundle
}
}
私は以下に私の一気ファイルが呼び出すいくつかのユーティリティメソッド、作ってみたその効果...に、vendorLibsは一緒にスローされます単一のファイルにまとめられ、appBundleは自明です。
私は別のvendor.jsファイルを導入する前にこの作業をしていましたが、私はそこにすべての依存関係を持っていましたが、縮小したときにReactがボールを弾くのをやめてしまいました。もう一度そこに行く準備ができていても、無駄な日数が多すぎる）。
これは私の残りのベンダーの葉が、私は今PropTypesが発見されていない問題を取得しています....
_prelude.js：1不明なエラーは：sにおけるモジュールのプロパタイプ " を見つけることができません（_prelude.js：1）
これは、prop-typesがvendor.jsパッケージの一部であったときに、Reactにアクセスしようとしているときに同様のエラーが発生しました。