Xây dựng có điều kiện dựa trên môi trường sử dụng Webpack

Tôi có một số thứ cần phát triển - ví dụ như các bản mô phỏng mà tôi không muốn làm cồng kềnh tệp bản dựng được phân phối của mình.

Trong RequestJS, bạn có thể chuyển một cấu hình trong một tệp plugin và yêu cầu những thứ dựa trên đó một cách tùy tiện.

Đối với webpack dường như không có cách nào để làm điều này. Đầu tiên để tạo cấu hình thời gian chạy cho một môi trường, tôi đã sử dụng giải quyết.alias để chỉ định lại một yêu cầu tùy thuộc vào môi trường, ví dụ:

// All settings.
var all = {
    fish: 'salmon'
};

// `envsettings` is an alias resolved at build time.
module.exports = Object.assign(all, require('envsettings'));

Sau đó, khi tạo cấu hình webpack, tôi có thể tự động gán tệp envsettingstrỏ tới (ví dụ webpackConfig.resolve.alias.envsettings = './' + env).

Tuy nhiên, tôi muốn làm điều gì đó như:

if (settings.mock) {
    // Short-circuit ajax calls.
    // Require in all the mock modules.
}

Nhưng rõ ràng là tôi không muốn xây dựng trong các tệp giả đó nếu môi trường không phải là giả.

Tôi có thể đặt lại thủ công tất cả những yêu cầu đó vào một tệp sơ khai bằng cách sử dụng giải quyết lại.alias - nhưng có cách nào cảm thấy ít hack hơn không?

Bất kỳ ý tưởng làm thế nào tôi có thể làm điều đó? Cảm ơn.

Bạn có thể sử dụng plugin xác định .

Tôi sử dụng nó bằng cách làm điều gì đó đơn giản như sau trong tệp xây dựng webpack của bạn, nơi envlà đường dẫn đến tệp xuất một đối tượng của cài đặt:

// Webpack build config
plugins: [
    new webpack.DefinePlugin({
        ENV: require(path.join(__dirname, './path-to-env-files/', env))
    })
]

// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };

và sau đó điều này trong mã của bạn

if (ENV.debug) {
    console.log('Yo!');
}

Nó sẽ loại bỏ mã này ra khỏi tệp xây dựng của bạn nếu điều kiện là sai. Bạn có thể xem một ví dụ xây dựng Webpack đang hoạt động tại đây .

Không chắc tại sao câu trả lời "webpack.DefinePlugin" là câu trả lời hàng đầu ở mọi nơi để xác định các yêu cầu / nhập khẩu dựa trên Môi trường.

Các vấn đề với cách tiếp cận đó là bạn vẫn đang cung cấp tất cả những mô-đun cho khách hàng -> kiểm tra với webpack-bó-analyezer ví dụ. Và hoàn toàn không giảm kích thước gói.js của bạn :)

Vì vậy, những gì thực sự hoạt động tốt và hợp lý hơn nhiều là: NormalModuleReplacementPlugin

Vì vậy, thay vì thực hiện yêu cầu có điều kiện on_client -> chỉ không bao gồm các tệp không cần thiết vào gói ngay từ đầu

Hy vọng điều đó sẽ giúp

Sử dụng ifdef-loader. Trong các tệp nguồn của mình, bạn có thể làm những việc như

/// #if ENV === 'production'
console.log('production!');
/// #endif

webpackCấu hình có liên quan là

const preprocessor = {
  ENV: process.env.NODE_ENV || 'development',
};

const ifdef_query = require('querystring').encode({ json: JSON.stringify(preprocessor) });

const config = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: `ifdef-loader?${ifdef_query}`,
        },
      },
    ],
  },
  // ...
};

Cuối cùng tôi đã sử dụng một thứ tương tự như Câu trả lời của Matt Derrick , nhưng lo lắng về hai điểm:

1. Cấu hình hoàn chỉnh được đưa vào mỗi khi tôi sử dụng ENV(Điều này không tốt cho các cấu hình lớn).
2. Tôi phải xác định nhiều điểm nhập vì require(env)trỏ đến các tệp khác nhau.

Những gì tôi nghĩ ra là một trình tổng hợp đơn giản, xây dựng một đối tượng cấu hình và đưa nó vào mô-đun cấu hình.
Đây là cấu trúc tệp, tôi đang sử dụng cho việc này:

config/
 └── main.js
 └── dev.js
 └── production.js
src/
 └── app.js
 └── config.js
 └── ...
webpack.config.js

Các main.jsnắm giữ tất cả những thứ cấu hình mặc định:

// main.js
const mainConfig = {
  apiEndPoint: 'https://api.example.com',
  ...
}

module.exports = mainConfig;

Các dev.jsvà production.jscấu hình thứ chỉ giữ mà đè cấu hình chính:

// dev.js
const devConfig = {
  apiEndPoint: 'http://localhost:4000'
}

module.exports = devConfig;

Phần quan trọng là phần webpack.config.jstạo cấu hình và sử dụng DefinePlugin để tạo một biến môi trường __APP_CONFIG__chứa đối tượng cấu hình đã cấu hình:

const argv = require('yargs').argv;
const _ = require('lodash');
const webpack = require('webpack');

// Import all app configs
const appConfig = require('./config/main');
const appConfigDev = require('./config/dev');
const appConfigProduction = require('./config/production');

const ENV = argv.env || 'dev';

function composeConfig(env) {
  if (env === 'dev') {
    return _.merge({}, appConfig, appConfigDev);
  }

  if (env === 'production') {
    return _.merge({}, appConfig, appConfigProduction);
  }
}

// Webpack config object
module.exports = {
  entry: './src/app.js',
  ...
  plugins: [
    new webpack.DefinePlugin({
      __APP_CONFIG__: JSON.stringify(composeConfig(ENV))
    })
  ]
};

Bước cuối cùng bây giờ là config.js, nó trông giống như thế này (Sử dụng cú pháp xuất nhập của es6 ở đây vì nó nằm dưới webpack):

const config = __APP_CONFIG__;

export default config;

Trong của app.jsbạn bây giờ bạn có thể sử dụng import config from './config';để lấy đối tượng cấu hình.

một cách khác là sử dụng tệp JS dưới dạng tệp proxyvà để tệp đó tải mô-đun quan tâm commonjsvà xuất nó es2015 modulenhư sau:

// file: myModule.dev.js
module.exports = "this is in dev"

// file: myModule.prod.js
module.exports = "this is in prod"

// file: myModule.js
let loadedModule
if(WEBPACK_IS_DEVELOPMENT){
    loadedModule = require('./myModule.dev.js')
}else{
    loadedModule = require('./myModule.prod.js')
}

export const myString = loadedModule

Sau đó, bạn có thể sử dụng mô-đun ES2015 trong ứng dụng của mình một cách bình thường:

// myApp.js
import { myString } from './store/myModule.js'
myString // <- "this is in dev"

Đối mặt với vấn đề tương tự như OP và được yêu cầu, do được cấp phép, không bao gồm mã nhất định trong các bản dựng nhất định, tôi đã sử dụng trình tải webpack-có điều kiện như sau:

Trong lệnh xây dựng của mình, tôi đặt một biến môi trường thích hợp cho bản dựng của mình. Ví dụ: 'demo' trong package.json:

...
  "scripts": {
    ...
    "buildDemo": "./node_modules/.bin/webpack --config webpack.config/demo.js --env.demo --progress --colors",
...

Một chút khó hiểu bị thiếu trong tài liệu tôi đọc là tôi phải làm cho điều này hiển thị trong suốt quá trình xây dựng bằng cách đảm bảo biến env của tôi được đưa vào quy trình toàn cầu do đó trong webpack.config / demo.js của tôi:

/* The demo includes project/reports action to access placeholder graphs.
This is achieved by using the webpack-conditional-loader process.env.demo === true
 */

const config = require('./production.js');
config.optimization = {...(config.optimization || {}), minimize: false};

module.exports = env => {
  process.env = {...(process.env || {}), ...env};
  return config};

Với điều này tại chỗ, tôi có thể loại trừ bất kỳ thứ gì có điều kiện, đảm bảo rằng bất kỳ mã liên quan nào được loại bỏ đúng cách khỏi JavaScript kết quả. Ví dụ: trong route.js của tôi, nội dung demo được giữ bên ngoài các bản dựng khác, do đó:

...
// #if process.env.demo
import Reports from 'components/model/project/reports';
// #endif
...
const routeMap = [
  ...
  // #if process.env.demo
  {path: "/project/reports/:id", component: Reports},
  // #endif
...

Điều này hoạt động với webpack 4.29.6.

Tôi đã vật lộn với việc thiết lập env trong cấu hình webpack của mình. Những gì tôi thường muốn là để thiết lập env để nó có thể đạt được bên trong webpack.config.js, postcss.config.jsvà bên trong ứng dụng điểm vào bản thân ( index.jsthường). Tôi hy vọng rằng những phát hiện của tôi có thể giúp ích cho ai đó.

Giải pháp mà tôi đã đưa ra là chuyển vào --env productionhoặc --env developmentrồi đặt chế độ bên trong webpack.config.js. Tuy nhiên, điều đó không giúp tôi có envthể truy cập ở nơi tôi muốn (xem ở trên), vì vậy tôi cũng cần đặt process.env.NODE_ENVrõ ràng, như được khuyến nghị ở đây . Phần liên quan nhất mà tôi có trong webpack.config.jsphần dưới đây.

...
module.exports = mode => {
  process.env.NODE_ENV = mode;

  if (mode === "production") {
    return merge(commonConfig, productionConfig, { mode });
  }
  return merge(commonConfig, developmentConfig, { mode });
};

Sử dụng các biến envirnment để tạo triển khai dev và prod:

https://webpack.js.org/guides/enosystem-variables/

Mặc dù đây không phải là giải pháp tốt nhất, nhưng nó có thể phù hợp với một số nhu cầu của bạn. Nếu bạn muốn chạy mã khác trong nút và trình duyệt bằng cách sử dụng điều này phù hợp với tôi:

if (typeof window !== 'undefined') 
    return
}
//run node only code now