你可能不知道的操作(1)

发表于 | 浏览 次

node使用es6的引入模式

  • node 版本大于14,将文件的扩展名改为.mjs(小于14执行的时候加上 –experimental-modules)
  • 如果有packjson,配置 type字段为module,具体玩法,这样就可以在web和node中采用同一种方式引入模块啦

  • 当然更好的方式使用ts来书写咯!!! 

    1
    2
    3
    {
    	"type":"module"
    }

  • 使用这种方式后,__filename没有了,可以使用如下方式实现呢

1
2
3
4
5
6
7
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
console.log("__fileName:", __filename);
console.log("__dirName:", __dirname);

脱离webpack在html中直接使用react

  • 如果你喜欢用react,页面内容较少,可以采用此种方式呢,仅供玩玩
  • 注意react的script标签的type为 text/babel,具体玩法看这里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	
  <script type="text/babel">	

    function Hello({ name }) {
      const savedCallback = React.useRef(null);
      const [count, updateCount] = React.useState(0)
      
      React.useEffect(() => {
        savedCallback.current = function () {
          updateCount(c => c + 1)
        }
      }, [])

      React.useEffect(() => {
        const interval = setInterval(() => savedCallback.current(), 1000);
        return () => clearInterval(interval);
      }, []);

      return <div>
        hello {name} + {count}
      </div>
    }


    ReactDOM.render(<Hello name="World" />, document.getElementById("root"));

  </script>
</body>

</html>
关于我

软件开发攻城狮一枚,熟悉dapp,web,android,node,go等软件的开发。