Apakah mungkin untuk mendefinisikan variabel global dengan webpack untuk menghasilkan sesuatu seperti ini:
var myvar = {};
Semua contoh yang saya lihat menggunakan file eksternal require("imports?$=jquery!./file.js")
sumber
Apakah mungkin untuk mendefinisikan variabel global dengan webpack untuk menghasilkan sesuatu seperti ini:
var myvar = {};
Semua contoh yang saya lihat menggunakan file eksternal require("imports?$=jquery!./file.js")
Ada beberapa cara untuk mendekati global:
Webpack mengevaluasi modul hanya sekali, jadi instance Anda tetap global dan membawa perubahan dari modul ke modul. Jadi jika Anda membuat sesuatu seperti globals.js
dan mengekspor objek dari semua global Anda, maka Anda bisa import './globals'
dan membaca / menulis ke global ini. Anda dapat mengimpor ke dalam satu modul, membuat perubahan pada objek dari suatu fungsi dan mengimpor ke modul lain dan membaca perubahan tersebut dalam suatu fungsi. Juga ingat urutan sesuatu terjadi. Webpack pertama-tama akan mengambil semua impor dan memuatnya secara berurutan di file entry.js
. Kemudian itu akan dieksekusi entry.js
. Jadi di mana Anda membaca / menulis ke global itu penting. Apakah itu dari lingkup akar modul atau dalam fungsi yang dipanggil nanti?
Catatan : Jika Anda ingin instance menjadi new
setiap kali, gunakan kelas ES6 . Secara tradisional di JS Anda akan menggunakan huruf besar (berlawanan dengan huruf kecil untuk objek) seperti
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
Berikut cara melakukannya menggunakan ProvidPlugin Webpack (yang membuat modul tersedia sebagai variabel di setiap modul dan hanya modul tempat Anda benar-benar menggunakannya). Ini berguna saat Anda tidak ingin terus mengetik import Bar from 'foo'
lagi dan lagi. Atau Anda dapat membawa paket seperti jQuery atau lodash sebagai global di sini (meskipun Anda mungkin melihat Eksternal Webpack ).
Langkah 1) Buat modul apa saja. Misalnya, seperangkat utilitas global akan berguna:
utils.js
export function sayHello () {
console.log('hello')
}
Langkah 2) Alias modul dan tambahkan ke ProvidPlugin:
webpack.config.js
var webpack = require("webpack");
var path = require("path");
// ...
module.exports = {
// ...
resolve: {
extensions: ['', '.js'],
alias: {
'utils': path.resolve(__dirname, './utils') // <-- When you build or restart dev-server, you'll get an error if the path to your utils.js file is incorrect.
}
},
plugins: [
// ...
new webpack.ProvidePlugin({
'utils': 'utils'
})
]
}
Sekarang panggil utils.sayHello()
saja file js apa saja dan itu akan berfungsi. Pastikan Anda me-restart dev-server Anda jika Anda menggunakannya dengan Webpack.
Catatan: Jangan lupa memberi tahu linter Anda tentang global, jadi tidak akan ada keluhan. Misalnya, lihat jawaban saya untuk ESLint di sini .
Jika Anda hanya ingin menggunakan const dengan nilai string untuk global Anda, maka Anda dapat menambahkan plugin ini ke daftar plugin Webpack Anda:
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
Gunakan seperti:
console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
window.foo = 'bar' // For SPA's, browser environment.
global.foo = 'bar' // Webpack will automatically convert this to window if your project is targeted for web (default), read more here: https://webpack.js.org/configuration/node/
Anda akan melihat ini biasanya digunakan untuk polyfill, misalnya: window.Promise = Bluebird
(Untuk proyek sisi server) Paket dotenv akan mengambil file konfigurasi lokal (yang dapat Anda tambahkan ke .gitignore Anda jika ada kunci / kredensial) dan menambahkan variabel konfigurasi Anda ke objek process.env Node .
// As early as possible in your application, require and configure dotenv.
require('dotenv').config()
Buat .env
file di direktori root proyek Anda. Tambahkan variabel khusus lingkungan pada baris baru dalam bentuk NAME=VALUE
. Sebagai contoh:
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
Itu dia.
process.env
sekarang memiliki kunci dan nilai yang Anda tentukan di .env
file Anda .
var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
Terkait Eksternal Webpack , gunakan jika Anda ingin mengecualikan beberapa modul agar tidak disertakan dalam bundel bawaan Anda. Webpack akan membuat modul tersedia secara global tetapi tidak akan dimasukkan ke dalam bundel Anda. Ini berguna untuk pustaka besar seperti jQuery (karena paket eksternal yang mengguncang pohon tidak berfungsi di Webpack ) di mana Anda telah memuatnya di halaman Anda dalam tag skrip terpisah (mungkin dari CDN).
utils
namespace saya sendiri di file target - awalnya saya baru saja meletakkan breakpoint di browser jendela sumber dan saya terus bingung mengapautils
tidak ditentukan. Akhirnya saya menemukan bahwa webpack (agak cerdas) hanya menyertakan modul jika namespace-nya direferensikan setidaknya sekali. Oleh karena itu, setelah saya melakukan pengantar salah satu fungsi utilitas file target denganutils
, modul itu disertakan.externals
saja jika Anda perlu membuat variabel global. Contoh:externals: { 'webpackVariables': `{ serverUrl: '${ env.server }', cordovaBuild: '${ env.cordova }', }`, },
Kemudian gunakan sebagaiconst webpackVariables = require('webpackVariables');
declare const isProduction: bool;
Untuk referensi, lihat ini typescriptlang.org/docs/handbook/declaration-files/templates/…Saya akan menanyakan pertanyaan yang sama. Setelah mencari sedikit lebih jauh dan decyphering bagian dari dokumentasi webpack, saya pikir yang Anda inginkan adalah
output.library
danoutput.libraryTarget
di dalamwebpack.config.js
file.Sebagai contoh:
js / index.js:
var foo = 3; var bar = true;
webpack.config.js
module.exports = { ... entry: './js/index.js', output: { path: './www/js/', filename: 'index.js', library: 'myLibrary', libraryTarget: 'var' ... }
Sekarang jika Anda menautkan
www/js/index.js
file yang dihasilkan dalam tag skrip html, Anda dapat mengaksesnyamyLibrary.foo
dari mana saja di skrip Anda yang lain.sumber
export { foo }
dariindex.js
?Gunakan DefinePlugin .
new webpack.DefinePlugin(definitions)
Contoh:
plugins: [ new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true) }) //... ]
Pemakaian:
console.log(`Environment is in production: ${PRODUCTION}`);
sumber
Anda dapat menggunakan definisikan
window.myvar = {}
. Saat Anda ingin menggunakannya, Anda bisa menggunakan likewindow.myvar = 1
sumber
var window.CKEDITOR_BASEPATH = {};
Kesalahan adalah "Token Tak Terduga" setelahwindow.
var
kata kunci.window.CKEDITOR_BASEPATH = {};
Saya memecahkan masalah ini dengan menetapkan variabel global sebagai properti statis pada kelas yang paling relevan. Di ES5 terlihat seperti ini:
var Foo = function(){...}; Foo.globalVar = {};
sumber