Как использовать библиотеку из CDN в проекте WebPack в производстве

Я хотел бы использовать react.min.js из CDN в производстве (например, https://unpkg.com/[email protected]/dist/react.min.js)Как использовать библиотеку из CDN в проекте WebPack в производстве

Что лучший способ получить Webpack превратить мои import React from 'react' заявления в const React = window.React вместо здания node_modules/react в комплект?

Я делал это с resolve.alias так:

В index.html:

<head> 
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
    <script type="text/javascript" src="/assets/bundle.js"></script> 
</head>

В webpack.prod.config.js:

alias: { 
    react$: './getWindowReact', 
},

getWindowReact.js:

module.exports = window.React;

Примечание: В старом вопросе я не понимал, что строительство Реагирует на пакет Webpack с NODE_ENV=production будет лишать propTypes чеков. Один из ответов посвящен этому.

источник

2015-07-22 Andy

В вашем WebPack конфигурации вы можете использовать externals вариант, который будет импортировать модуль из среды вместо того, чтобы пытаться решить ее обычно:

// webpack.config.js 
module.exports = { 
    externals: { 
    'react': 'React' 
    } 
    ... 
};

Подробнее здесь: http://webpack.github.io/docs/library-and-externals.html

источник

2015-07-22 23:41:48 franky

Так получается, Я ошибался в том, что React строится с помощью Webpack, так что это не сработает. Но, похоже, это правильный ответ на использование модуля, который построен с помощью Webpack, поэтому я буду принимать этот ответ. – Andy

@ Andy Я могу не полностью понять ваш комментарий, но предлагаемое здесь требование не требует, чтобы загружаемая библиотека была построена с помощью Webpack. Весь этот пример «externals» показывает webpack, если модуль запрашивает «реагировать», возвращает 'window.React'. – Aaronius

@Aaronius да, извините, я неправильно понял webpack 'externals' в то время ... документы для них выглядят неловко. – Andy

Все развитие - только части кода кода React, такие как проверки PropType, охраняются с помощью:

if ("production" !== process.env.NODE_ENV) { 
    .. 
}

Чтобы удалить их из React в своей собственной сборке, создав эквивалент миниатюрной сборки React в своем собственном пакете, используйте DefinePlugin для замены ссылок на process.env.NODE_ENV на "production". удаление неиспользуемого кода

plugins: [ 
    // ... 
    new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify('production') 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
    compressor: { 
     warnings: false 
    } 
    }) 
    // ... 
],

уродовать будет затем убирается все это, как он обнаружит, что код, обернутый с "production" !== "production" проверка недостижима.

источник

2015-07-23 00:25:16

Это тоже интересно узнать, хотя, поскольку мой босс хочет использовать React от CDN, мы будем придерживаться этого. – Andy

Я создал https://github.com/mastilver/dynamic-cdn-webpack-plugin, который делает именно то, что из коробки

const path = require('path') 
const HTMLWebpackPlugin = require('html-webpack-plugin') 
const DynamicCDNWebpackPlugin = require('dynamic-cdn-webpack-plugin') 

module.exports = { 
    entry: './main.js', 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: 'babel-loader' 
     } 
     } 
    ] 
    }, 
    plugins: [ 
    new HTMLWebpackPlugin(), 
    new ModulesCDNWebpackPlugin() 
    ] 
}

будет динамически добавлять unpkg.org URLs и добавьте соответствующий код в пачке для загрузки librairies из global

источник

2017-07-04 15:06:06 mastilver

badass, это отличная идея! Я использую 'https: // github.com/kossnocorp/assets-webpack-plugin' вместо плагина manifest, вы знаете, будет ли ваш плагин работать с' assets-webpack-plugin'? – Andy

@ Энди Я не пробовал, но я считаю, что так оно и есть. Если не стесняйтесь поднять вопрос :) – mastilver

@mastilver 'путь' - это где идет ссылка CDN? –

Как использовать библиотеку из CDN в проекте WebPack в производстве

ответ

Смежные вопросы