c. 运行时:用来创建Vue实例,渲染并处理虚拟Dom等的代码
ps. 仍希望使用完整版配置,代码如下:
// webpack
module.exports = {
//..
resolve: {
alias: {
// webpack1时需用'vue/dist/vue.common.js'
'vue$': 'vue/dist/vue.esm.js'
}
}
}
// rollup
const alias = require('rollup-plugin-alias')
rollup({
//..
plugins: [
alias({
'vue': require.resolve('vue/dist/vue.esm.js')
})
]
})
// Browserify,添加到项目的package.json
{
// ..
"browser": {
"vue": "vue/dist/vue.comme.js"
}
}
// parcel,添加到项目的package.json
{
// ..
"alias": {
"vue": "./node_modules/vue/dist/vue.comme.js"
}
}
UMD版本的开发环境/生产环境是硬编码好的,开发环境下用未压缩代码,生产环境下使用压缩代码。
CommonJs和ES Module版本用于打包工具,不提供压缩版本,需要自行压缩。
CommonJs和ES Module虽保留原始的process.env.NODE_ENV检测,以决定运行在什么模式下。但是我们应该使用适当的打包工具替换这个环境变量,来控制Vue运行的模式。
ps. 把process.env.NODE_ENV替换为字符串字面量可以让UglifyJS之类的压缩工具完全丢掉仅供开发环境的代码块,以减少最终文件尺寸.
// webpack4+,使用mode选项
module.exports = {
mode: 'production'
}
// webpack3及更低版本,使用DefinePlugin
var webpack = require('webpack');
module.exports = {
//..
plugins: [
//..
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
}
// rollup使用rollup-plugin-replace
const replace = require('rollup-plugin-replace')
rollup({
//..
plugins: [
replace: ({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}).then(...)
// Browserify,为包应用一次全局的envify转换
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
Google Chrome Apps,会强制应用内容安全策略(CSP),不能使用new Function()对表达式求值,这时可以用CSP兼容版本。完整版本依赖该功能编译模板,所以无法在这些环境下使用。
另一方面,运行时版本完全兼容CSP,当通过webpack+vue-loader或者Browserify+vueify构建时,模板将被编译为render函数,可以在CSP环境中完美执行。
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_module/vue
npm install
npm run build
Bower只提供UMD版本
# 最新稳定版本
$ bower install vue
所有UMD版本都可以直接使用AMD模块。
原文:https://www.cnblogs.com/LittlePANDA-ZSJ/p/11205213.html