开始的开始,是学习ECMAScript Decorator函数,发现,直接在浏览器是不能运行的。怎么办? 使用Babel Babel对Decorator进行转码呗。
方案1:Babel官网 https://babeljs.io/repl/
使用方案1,发现每次使用Decorator函数 都要复制到Babel转码测试,实在是太麻烦
方案2 webpack + Babel
1:webpack基础环境搭建
//创建文件夹
mkdir decorator--demo
//进入文件夹
cd decorator--demo
//生成package.json文件
npm init -y
//安装webpack webpack-cli
npm install webpack webpack-cli --save-dev
在根目录下面创建src文件夹 然后创建index.js 和 print.js 文件
index.js
@testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
console.log('index.js')
根目录下新建 webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
在根目录下面新建.babelrc
{
"plugins": ["transform-decorators-legacy"]
}
安装Babel
npm install babel babel-core babel-loader babel-plugin-transform-decorators-legacy core-decorators --save-dev
修改package.json 文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
运行文件
npm run build
———- 以上可以实现Decorator 转码 ————-
but 我还想文件进行实时编译
为了生成html页面 引入html-webpack-plugin
npm install --save-dev html-webpack-plugin
修改webpack.config.js
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+ plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
修改package.js 文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
+ "watch": "webpack --watch --progress"
},
执行命名
npm run watch
实现热更新
安装 webpack-dev-server
npm isntall webpack-dev-server -save-dev
修改 webpack.config.js
devServer: {
contentBase: './dist'
},
修改package.json文件
"server": "webpack-dev-server --open"
执行命令
npm run server
浏览器访问
http://localhost:8080/
———- 整理配置文件如下 —————
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --watch --progress",
"server": "webpack-dev-server --hotOnly",
"start": "webpack-dev-server --open --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-loader": "^7.1.5",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"clean-webpack-plugin": "^0.1.19",
"core-decorators": "^0.20.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1"
},
"babel": {
"presets": [
"env"
],
"plugins": []
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
devServer: {
contentBase: './dist'
},
devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
.babelrc
{
"plugins": ["transform-decorators-legacy"]
}