আমি এর বিশাল ভক্ত নই ...
new webpack.DefinePlugin({
'process.env': envVars
}),
... এটি কোনও ধরণের সুরক্ষা সরবরাহ করে না। পরিবর্তে, আপনি আপনার গোপন স্টাফগুলিকে উত্সাহিত করবেন, যদি না আপনি গিটিগনোর-এ কোনও ওয়েবপ্যাক যোগ না করে a♀️ এর থেকে আরও ভাল সমাধান পাওয়া যায়।
মূলত এই কনফিগারেশনটি দিয়ে আপনি একবার আপনার কোডটি সংকলন করে সমস্ত প্রসেস env ভেরিয়েবলগুলি পুরো কোড থেকে মুছে ফেলা হবে, সেখানে কোনও একক প্রক্রিয়া হবে না env.VAR বাবেল প্লাগইন পিএসকে ধন্যবাদ transform-inline-environment-variables
যদি আপনি শেষ না করতে চান তবে পুরো গোছা অনির্দিষ্ট সংশোধন করে, ওয়েবপ্যাক বাবেল-লোডারকে কল করার আগে আপনি env.js কে কল করেছেন তা নিশ্চিত করুন, এ কারণেই এটি প্রথম জিনিস ওয়েবপ্যাক কল। babel.config.js ফাইলে vars এর অ্যারে অবশ্যই env.js- তে বস্তুর সাথে মেলে must এখন কেবল একটাই করণীয় কাজ। .envআপনার সমস্ত এনভির ভেরিয়েবলগুলিকে একটি ফাইল যুক্ত করুন , ফাইলটি অবশ্যই প্রকল্পের মূলের মধ্যে থাকা উচিত বা যেখানে আপনি চান সেখানে যুক্ত করতে দ্বিধা বোধ করবেন না, কেবল এনভি.ভি.এস ফাইলটিতে একই অবস্থান নির্ধারণ এবং এটিতে যুক্ত করার বিষয়টি নিশ্চিত করুন gitignore
const dotFiles = ['.env'].filter(Boolean);
if (existsSync(dotFiles)) {
require("dotenv-expand")(require("dotenv").config((dotFiles)));
}
আপনি যদি পুরো ব্যাবেল + ওয়েবপ্যাকটি দেখতে চান তবে এটি হ'ল
https://github.com/EnetoJara/Node-typescript-babel-webpack.git
এবং একই যুক্তি প্রতিক্রিয়া এবং অন্যান্য সমস্ত ক্ষেত্রে প্রযোজ্য 💩
config
---webpack.js
---env.js
src
---source code world
.env
bunch of dotFiles
env.js
"use strict";
/***
I took the main idea from CRA, but mine is more cooler xD
*/
const {realpathSync, existsSync} = require('fs');
const {resolve, isAbsolute, delimiter} = require('path');
const NODE_ENV = process.env.NODE_ENV || "development";
const appDirectory = realpathSync(process.cwd());
if (typeof NODE_ENV !== "string") {
throw new Error("falle and stuff");
}
const dotFiles = ['.env'].filter(Boolean);
if (existsSync(dotFiles)) {
require("dotenv-expand")(require("dotenv").config((dotFiles)));
}
process.env.NODE_PATH = (process.env.NODE_PATH || "")
.split(delimiter)
.filter(folder => folder && isAbsolute(folder))
.map(folder => resolve(appDirectory, folder))
.join(delimiter);
const ENETO_APP = /^ENETO_APP_/i;
module.exports = (function () {
const raw = Object.keys ( process.env )
.filter ( key => ENETO_APP.test ( key ) )
.reduce ( ( env, key ) => {
env[ key ] = process.env[ key ];
return env;
},
{
BABEL_ENV: process.env.ENETO_APP_BABEL_ENV,
ENETO_APP_DB_NAME: process.env.ENETO_APP_DB_NAME,
ENETO_APP_DB_PASSWORD: process.env.ENETO_APP_DB_PASSWORD,
ENETO_APP_DB_USER: process.env.ENETO_APP_DB_USER,
GENERATE_SOURCEMAP: process.env.ENETO_APP_GENERATE_SOURCEMAP,
NODE_ENV: process.env.ENETO_APP_NODE_ENV,
PORT: process.env.ENETO_APP_PORT,
PUBLIC_URL: "/"
} );
const stringyField = {
"process.env": Object.keys(raw).reduce((env, key)=> {
env[key]=JSON.stringify(raw[key]);
return env;
},{}),
};
return {
raw, stringyField
}
})();
প্লাগইন ট্রল সহ ওয়েবপ্যাক ফাইল
"use strict";
require("core-js");
require("./env.js");
const path = require("path");
const nodeExternals = require("webpack-node-externals");
module.exports = env => {
return {
devtool: "source-map",
entry: path.join(__dirname, '../src/dev.ts'),
externals: [nodeExternals()],
module: {
rules: [
{
exclude: /node_modules/,
test: /\.ts$/,
use: [
{
loader: "babel-loader",
},
{
loader: "ts-loader"
}
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
},
],
},
],
},
node: {
__dirname: false,
__filename: false,
},
optimization: {
splitChunks: {
automaticNameDelimiter: "_",
cacheGroups: {
vendor: {
chunks: "initial",
minChunks: 2,
name: "vendor",
test: /[\\/]node_modules[\\/]/,
},
},
},
},
output: {
chunkFilename: "main.chunk.js",
filename: "name-bundle.js",
libraryTarget: "commonjs2",
},
plugins: [],
resolve: {
extensions: ['.ts', '.js']
} ,
target: "node"
};
};
babel.config.js
module.exports = api => {
api.cache(() => process.env.NODE_ENV);
return {
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-transform-classes", {loose: true}],
["@babel/plugin-external-helpers"],
["@babel/plugin-transform-runtime"],
["@babel/plugin-transform-modules-commonjs"],
["transform-member-expression-literals"],
["transform-property-literals"],
["@babel/plugin-transform-reserved-words"],
["@babel/plugin-transform-property-mutators"],
["@babel/plugin-transform-arrow-functions"],
["@babel/plugin-transform-block-scoped-functions"],
[
"@babel/plugin-transform-async-to-generator",
{
method: "coroutine",
module: "bluebird",
},
],
["@babel/plugin-proposal-async-generator-functions"],
["@babel/plugin-transform-block-scoping"],
["@babel/plugin-transform-computed-properties"],
["@babel/plugin-transform-destructuring"],
["@babel/plugin-transform-duplicate-keys"],
["@babel/plugin-transform-for-of"],
["@babel/plugin-transform-function-name"],
["@babel/plugin-transform-literals"],
["@babel/plugin-transform-object-super"],
["@babel/plugin-transform-shorthand-properties"],
["@babel/plugin-transform-spread"],
["@babel/plugin-transform-template-literals"],
["@babel/plugin-transform-exponentiation-operator"],
["@babel/plugin-proposal-object-rest-spread"],
["@babel/plugin-proposal-do-expressions"],
["@babel/plugin-proposal-export-default-from"],
["@babel/plugin-proposal-export-namespace-from"],
["@babel/plugin-proposal-logical-assignment-operators"],
["@babel/plugin-proposal-throw-expressions"],
[
"transform-inline-environment-variables",
{
include: [
"ENETO_APP_PORT",
"ENETO_APP_NODE_ENV",
"ENETO_APP_BABEL_ENV",
"ENETO_APP_DB_NAME",
"ENETO_APP_DB_USER",
"ENETO_APP_DB_PASSWORD",
],
},
],
],
presets: [["@babel/preset-env",{
targets: {
node: "current",
esmodules: true
},
useBuiltIns: 'entry',
corejs: 2,
modules: "cjs"
}],"@babel/preset-typescript"],
};
};